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

PHPz

发布时间：2023-04-18 09:47:07

2454人浏览过

来源于php中文网

原创

近年来，随着前端技术的不断发展，字体图标作为一种轻量级的图标解决方案，被广泛应用于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地址可能受到网络影响，所以最好提供多个备选方案。修改方式如下：

绘蛙

电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

下载

在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是我们在字体文件中自定义的图标类名。