微信小程序使用icon font，开发者工具可以显示，但真机无法显示。是为什么？

Question

提问之前先吐个槽，之前在用阿里iconfont的时候，是可以直接从阿里的库里获取图标的，现在阿里把口禁了，只能把图标下载到本地，真的是好烦啊。

下载到本地之后，我的代码是这样写的

@font-face {
  font-family: "iconfont"; /* Project id 3534806 */
  src: url('/static/iconfont/iconfont.woff2?t=1545807318834') format('woff2'),
       url('/static/iconfont/iconfont.woff?t=1545807318834') format('woff'),
       url('/static/iconfont/iconfont.ttf?t=1545807318834') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-more:before {
  content: "\e639";
  font-size: 16px;
}

之后文件路径和显示效果如图所示

但是，问题来了。

我在微信开发者工具上看是正常的，但是使用手机预览之后，就无法显示图标，不知道是什么原因。。。

Answer 1

关闭一下这个问题，因为我在腾讯的文档中找到了一种说法，微信小程序是无法直接处理字体文件的，说法如下：

注：若是采用 下载至本地 方式，需关注 .css 和 .ttf 文件。由于微信小程序不支持处理 ttf、woff、eot 等文件，但支持 base64，所以需要将 .ttf 文件转换为 base64 (可借助转换工具，如 transfonter.org，会得到一个 stylesheet.css 文件)，然后将 .css 文件中的 @font-face {} 内容替换为 stylesheet.css 中的 base64 内容，最后将 .css 文件修改后缀为 .wxss

https://tdesign.tencent.com/m...

Answer 2

• 试试用网络字体文件，可能需要配置域名白名单
• 如果无法使用网络字体文件，可以用 base64 格式字体，参考：https://juejin.cn/post/702852...