近年来，随着前端技术的不断发展，字体图标作为一种轻量级的图标解决方案，被广泛应用于web端和移动端的设计中。在使用uniapp开发移动端应用时，我们也可以方便地使用字体图标，但是经常会出现字体图标在打包后无法正常显示的问题。今天，我们将一起探讨uniapp打包后字体图标不显示的原因和解决方法。
原因分析
1. 字体文件未加载成功
首先，我们需要了解uniapp打包后会生成一个dist目录，该目录下的内容即为我们最终发布的应用，包括各种资源文件和HTML文件等。当我们使用字体图标时，其实是在HTML文件中使用了CSS样式，将数据源设为字体图标的字体文件，因此问题可能出现在HTML文件或者字体文件上。
最常见的情况是字体文件未加载成功，导致字体图标无法显示。可以通过F12开发者工具查看控制台输出，如果存在404或network error并且字体文件是请求失败状态，那么就可以判定字体文件未加载成功。
2. 地址错误
另一种可能是我们引入字体的地址错误，因为uniapp中使用相对路径来引入资源文件，所以需要保证HTML文件和字体文件在同一文件夹下。如果出现了文件路径错误，也会导致字体图标无法正常显示。同样，通过控制台输出可以判定是否存在路径错误。
解决方法
1. 添加本地字体资源
如果字体文件未加载成功，我们可以尝试将字体文件添加到本地资源中，然后在HTML文件中使用本地相对路径来引用。
- 在项目根目录下新建一个
fonts文件夹，将下载的字体文件解压到该文件夹中。 -
进入
uni.scss文件，引入字体文件，如下所示：@font-face{ font-family:'iconfont'; src:url(../fonts/iconfont.ttf) format('truetype'); }这里需要注意，
@font-face中font-family的名称需要和HTML中使用的字体名称保持一致。 -
在HTML文件中使用字体图标，如下所示：
这里的
uni-icon-wode是我们在字体文件中自定义的图标类名，而uni-icon是uni.scss中定义的基础类。
若通过此方法解决了字体图标无法显示的问题，那么恭喜你，问题已经得到了解决。但是，有时即使我们已经按照上述方法来处理，字体图标依然无法正常显示，这时就可以尝试下面的方法。
2. 使用cdn
有时我们会发现字体文件本地引用失败，那么我们可以考虑使用cdn来解决该问题。但是在使用cdn时，需要保证我们引入的cdn地址正确，并且由于cdn地址可能受到网络影响，所以最好提供多个备选方案。修改方式如下：
-
在
manifest.json文件中，添加字体文件的资源地址，如下所示："networkTimeout": { "request": 5000, "downloadFile": 10000 }, "onDemandResourceRules": [ { "host": "xxxxx.com", "files": [ "/fonts/iconfont.ttf" ] } ], "preloadRule": { "async": [ {"path": "xxxxx.com/fonts/iconfont.ttf"} ], "sync": [ ] }其中
xxxxx.com为我们指定cdn的域名。 -
在
uni.scss文件中使用cdn地址，如下所示：@font-face{ font-family:'iconfont'; src:url(//xxxxx.com/fonts/iconfont.ttf) format('truetype'); }这里的
//表示使用了协议相同的相对路径，适用于http、https等。 -
在HTML文件中使用字体图标，如下所示：
同样，这里的
uni-icon-wode是我们在字体文件中自定义的图标类名。
需要注意的是，使用cdn也可能会遇到其他问题，比如连接不稳定、文件超过缓存限制等，所以需要多做测试和备份方案。
总的来说，在使用uniapp开发移动应用时，字体图标是一个很好的和轻量级的图标解决方案，但是由于打包后的复杂性和资源处理方式等问题，可能会出现字体图标无法正常显示的情况。以上两种方法可以帮助我们解决这些问题，让我们的应用更加美观实用。
