控制台 反馈

微信小程序如何引用外部iconfont文件

发布/小网 数据源/原创
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

近期接触开发小程序项目,不对原H5开发都是用阿里的iconfont制作小图标使用,想在小程序上继续延用。但是在实际过程中发现使用自己的外部域名时,在手机端上无法正常显示,但是引用iconfont官方提供的CDN地址可以正常显示。那么问题出在哪里?

通过HTTP请求分析发现有两个可参考的地方:

1. 允许任何跨域请求;

2. Content-Type为application/octet-stream

找到参考信息号,开始修改自己的Web服务器。

首先,只添加支持跨域请求配置。

location ~* ^.+\.(eot|ttf|otf|woff|svg)$ {
    add_header Access-Control-Allow-Origin *;  
 
    access_log   off;
    expires max;
}

修改配置重启后,发现在手机上还是不显示出来,继续增加header配置,配置如下:

location ~* ^.+\.(eot|ttf|otf|woff|svg)$ {
    add_header Access-Control-Allow-Origin *; 
    add_header Content-Type application/octet-stream; 
 
    access_log   off;
    expires max;
}

重新编绎小程序后,用手机端访问正常。


至此 DONE...

@font-face {
  font-family: "basefont";
  src: url('https://yourdomain.com/static/v1.0/fonts/iconfont.eot?t=R18B0406'); /* IE9*/
  src: url('https://yourdomain.com/static/v1.0/fonts/iconfont.eot?t=R18B0406#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://yourdomain.com/static/v1.0/fonts/iconfont.woff?t=R18B0406') format('woff'), /* chrome, firefox */
       url('https://yourdomain.com/static/v1.0/fonts/iconfont.ttf?t=R18B0406') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
       url('https://yourdomain.com/static/v1.0/fonts/iconfont.svg?t=R18B0406#basefont') format('svg'); /* iOS 4.1- */
}.icofont::before,
.icofont::after{
  cursor: inherit;
  font-family: "basefont";
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}.nodata{
  height: 400rpx;
}
.nodata::before{
  content: "\e6b3";
  font-size: 128rpx;
  margin-top: 20rpx;
}
.moredata{
  height: 88rpx;
}
.moredata.loading text::before{
  content: "\e667";
  margin-right: 6rpx;
  display: inline-block;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation: icofont-spin 2s infinite linear;
          animation: icofont-spin 2s infinite linear;
}