由于微信小程序的限制问题，我们不会像 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 文件中使用： { {item.ename}} 今年计划投入（万元） { {fn.transInput(item.sumMoney)}} 今年实际支出（万元） { {fn.transInput(item.siOut)}} 上年安全生产费 提取金额（万元） { {fn.transInput(item.snExtract)}} 上年安全生产费 余额（万元） { {fn.transInput(item.snBalance)}} 请选择企业 页面效果： 二、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” 中引入和使用了！！同在线引入，不再赘述！！