uniapp打包后字体图标不显示怎么办

近年来，随着前端技术的不断发展，字体图标作为一种轻量级的图标解决方案，被广泛应用于web端和移动端的设计中。在使用uniapp开发移动端应用时，我们也可以方便地使用字体图标，但是经常会出现字体图标在打包后无法正常显示的问题。今天，我们将一起探讨uniapp打包后字体图标不显示的原因和解决方法。

原因分析

1. 字体文件未加载成功

首先，我们需要了解uniapp打包后会生成一个dist目录，该目录下的内容即为我们最终发布的应用，包括各种资源文件和HTML文件等。当我们使用字体图标时，其实是在HTML文件中使用了CSS样式，将数据源设为字体图标的字体文件，因此问题可能出现在HTML文件或者字体文件上。

最常见的情况是字体文件未加载成功，导致字体图标无法显示。可以通过F12开发者工具查看控制台输出，如果存在404或network error并且字体文件是请求失败状态，那么就可以判定字体文件未加载成功。

2. 地址错误

另一种可能是我们引入字体的地址错误，因为uniapp中使用相对路径来引入资源文件，所以需要保证HTML文件和字体文件在同一文件夹下。如果出现了文件路径错误，也会导致字体图标无法正常显示。同样，通过控制台输出可以判定是否存在路径错误。

解决方法

1. 添加本地字体资源

如果字体文件未加载成功，我们可以尝试将字体文件添加到本地资源中，然后在HTML文件中使用本地相对路径来引用。

1. 在项目根目录下新建一个fonts文件夹，将下载的字体文件解压到该文件夹中。

2. 进入uni.scss文件，引入字体文件，如下所示：

   @font-face{
       font-family:'iconfont';
       src:url(../fonts/iconfont.ttf) format('truetype');
   }

   这里需要注意，@font-face 中 font-family 的名称需要和HTML中使用的字体名称保持一致。

3. 在HTML文件中使用字体图标，如下所示：

   <i class="uni-icon uni-icon-wode"></i>

   这里的uni-icon-wode是我们在字体文件中自定义的图标类名，而uni-icon是uni.scss中定义的基础类。

若通过此方法解决了字体图标无法显示的问题，那么恭喜你，问题已经得到了解决。但是，有时即使我们已经按照上述方法来处理，字体图标依然无法正常显示，这时就可以尝试下面的方法。

2. 使用cdn

有时我们会发现字体文件本地引用失败，那么我们可以考虑使用cdn来解决该问题。但是在使用cdn时，需要保证我们引入的cdn地址正确，并且由于cdn地址可能受到网络影响，所以最好提供多个备选方案。修改方式如下：

Mokker AI

AI产品图添加背景

下载

1. 在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的域名。

2. 在uni.scss 文件中使用cdn地址，如下所示：

   @font-face{
       font-family:'iconfont';
       src:url(//xxxxx.com/fonts/iconfont.ttf) format('truetype');
   }

   这里的// 表示使用了协议相同的相对路径，适用于http、https等。

3. 在HTML文件中使用字体图标，如下所示：

   <i class="uni-icon uni-icon-wode"></i>

   同样，这里的uni-icon-wode是我们在字体文件中自定义的图标类名。

需要注意的是，使用cdn也可能会遇到其他问题，比如连接不稳定、文件超过缓存限制等，所以需要多做测试和备份方案。

总的来说，在使用uniapp开发移动应用时，字体图标是一个很好的和轻量级的图标解决方案，但是由于打包后的复杂性和资源处理方式等问题，可能会出现字体图标无法正常显示的情况。以上两种方法可以帮助我们解决这些问题，让我们的应用更加美观实用。