由于微信小程序的限制问题，我们不会像 Web 项目那样引入阿里的字体图标库，通常采用在线生成链接的方式引入。
但阿里矢量图库在 2022年 6-7月份 进行了网站维护，维护之后，不能“生成在线链接”引入到项目中了（但是现在又可以使用在线了，为了防止以后类似的事情发生，写了这篇文章）。
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址
一、生成在线链接的方式（维护后没有找到入口）
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 格式（关键）
推荐去 https://transfonter.org 进行格式转换，当然也可以通过其它方式转换。
配置：打开“ Base64 encode ” 选项，选择上传文件的格式“TTF格式”
点击 ”Add fonts“ 按钮，上传 ttf 文件，如下上传和上传完成的效果：
点击 ”Convert“ 按钮，进行格式转换，转换完成可下载和预览：
点击 ”Download“ 按钮下载得到一个名为 “transfonter.org”开头的字体压缩包，字体包内三个文件如下：
打开 ”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” 中引入和使用了！！同在线引入，不再赘述！！
