由于微信小程序的限制问题，我们不会像 Web 项目那样引入阿里的字体图标库，通常采用在线生成链接的方式引入。
但阿里矢量图库在 6-7月份 进行了网站维护，维护之后，不能“生成在线链接”引入到项目中了（但是现在又可以使用在线了，为了防止以后类似的事情发生，写了这篇文章）。
一、生成在线链接的方式（维护后没有找到入口）
1.1 查看在线链接
注意：如果在项目中每次加入了新的图标，必须更新代码，重新生成外部样式链接
1.2 点击“下载至本地”按钮，得到字体包
打开项目中自定义的“iconfont.css”文件如下：
1.3 上面选中部分，替换为在线链接：
1.4 在 app.js 中引入，即可在 page 中使用：
1.5 在 wxml 文件中使用：
<view class="padding-20-0 m-t-100 bgc"><view wx:if="{{safetyEmps.length}}"><view wx:key="this" wx:for="{{safetyEmps}}" class="mrg-0-10 {{index !== 0 ? 'm-t-30' : ''}}"><view class="font30 fontB padding20 colorfff" style="background-color: {{index % 2 == 0 ? '#0062D9' : '#5C75F2'}};">{{item.ename}}</view><view class="flex-wrap text-right space-around m-t-10"><view class="w50p padding20 bgc border-box position-r {{index % 2 == 0 ? 'item' : 'item2'}}"><view class="">今年计划投入<text class="font20">（万元）</text></view><view class="fontB font36 m-l-15p m-t-10">{{fn.transInput(item.sumMoney)}}</view><text class="iconfont icon-lvzhou_zongshu font70 theme-color posi-br"></text></view><view class="w50p padding20 bgc border-box position-r {{index % 2 == 0 ? 'item' : 'item2'}}"><view class="">今年实际支出<text class="font20">（万元）</text></view><view class="fontB font36 m-l-15p m-t-10">{{fn.transInput(item.siOut)}}</view><text class="iconfont icon-a-touruzhichu theme-color font70 posi-br"></text></view><view class="w50p m-t-10 padding20 bgc border-box position-r {{index % 2 == 0 ? 'item' : 'item2'}}"><view class=""><view>上年安全生产费</view><view>提取金额<text class="font20">（万元）</text></view></view><view class="fontB font36 theme-color m-l-15p m-t-10">{{fn.transInput(item.snExtract)}}</view><text class="iconfont icon-yiqianding font100 theme-color posi-br"></text></view><view class="w50p m-t-10 padding20 bgc border-box position-r {{index % 2 == 0 ? 'item' : 'item2'}}"><view class=""><view>上年安全生产费</view><view>余额<text class="font20">（万元）</text></view></view><view class="fontB font36 theme-color m-l-15p m-t-10">{{fn.transInput(item.snBalance)}}</view><text class="iconfont icon-qiandinghezuoxieyi font70 theme-color posi-br" style="bottom:24rpx;"></text></view></view></view></view><view class="text-center padding20 bgc" wx:else>请选择企业</view></view>
页面效果：
二、6-7 月份官网维护后，没有找到在线生成链接的入口。维护后是这样的：
这样就没有办法像之前那样在线生成链接引入微信小程序了，又不能像 Web 那样去引入字体，下面说一下微信小程序离线引入字体的处理。
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里使用 iconfont 字体图标时，需要把平时的 iconfont 字体图标远程路径换成 base64 引入，就可以解决小程序引入iconfont字体图标这个问题了。
下载字体图标的过程和前面一样，就不再赘述。字体下载成功后，将得到一个名为“download.zip”的压缩包，解压后文件如下：
这里需要将 ttf 文件转为 base64 格式（关键）
推荐去 进行格式转换，当然也可以通过其它方式转换。
配置：打开“ Base64 encode ” 选项，选择上传文件的格式“TTF格式”
点击 ”Add fonts“ 按钮，上传 ttf 文件，如下上传和上传完成的效果：
点击 ”Convert“ 按钮，进行格式转换，转换完成可下载和预览：
点击 ”Download“ 按钮下载得到一个名为 “”开头的字体压缩包，字体包内三个文件如下：
打开 ”stylesheet.css“ 文件，并复制里面的内容：
打开项目中自定义的 ”iconfont.css“ 文件，将下面 “@font-face”和 “.iconfont”中的代码，替换为上面复制的代码（注意这里替换的是两段代码）：
你以为这样就完事儿了吗，不还没有，还需要加一段代码才能正常使用，如下：
[class^="icon-"],[class*=" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family: 'iconfont' !important;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
好了，到这里算是真正的处理完成。就可以正常的在 “app.wxss” 和 “page” 中引入和使用了！！同在线引入，不再赘述！！
关注公众号：前端知识分享喵，获取前端学习资料
