Que dois-je faire si l'icône de police ne s'affiche pas une fois Uniapp empaqueté ?

Ces dernières années, avec le développement continu de la technologie frontale, les icônes de polices, en tant que solution d'icônes légères, sont largement utilisées dans la conception Web et mobile. Lorsque nous utilisons Uniapp pour développer des applications mobiles, nous pouvons également facilement utiliser des icônes de police, mais il existe souvent un problème selon lequel les icônes de police ne peuvent pas être affichées correctement après l'emballage. Aujourd'hui, nous allons discuter des raisons et des solutions pour lesquelles l'icône de police ne s'affiche pas une fois l'uniapp emballé.

Analyse des causes

1. Le fichier de police n'a pas été chargé avec succès

Tout d'abord, nous devons comprendre qu'un répertoire dist sera généré après le packaging d'uniapp. Le contenu de ce répertoire est notre application finale publiée, comprenant divers. les fichiers de ressources et les fichiers HTML attendent. Lorsque nous utilisons des icônes de police, nous utilisons en fait des styles CSS dans le fichier HTML et définissons la source de données sur le fichier de police de l'icône de police, de sorte que le problème peut survenir dans le fichier HTML ou le fichier de police.

La situation la plus courante est que le fichier de police n'est pas chargé correctement, ce qui entraîne le fait que l'icône de la police ne s'affiche pas. Vous pouvez afficher la sortie de la console via les outils de développement F12. S'il y a une erreur 404 ou réseau et que le fichier de police est dans un état d'échec de demande, il peut être déterminé que le fichier de police n'a pas été chargé avec succès.

2. Erreur d'adresse

Une autre possibilité est que l'adresse où nous introduisons la police soit erronée. Étant donné qu'uniapp utilise des chemins relatifs pour introduire les fichiers de ressources, vous devez vous assurer que le fichier HTML et le fichier de police se trouvent dans le même dossier. Si une erreur de chemin de fichier se produit, l'icône de la police ne s'affichera pas correctement. De même, vous pouvez déterminer s'il existe une erreur de chemin via la sortie de la console.

Solution

1. Ajouter des ressources de police locales

Si le fichier de police ne se charge pas correctement, nous pouvons essayer d'ajouter le fichier de police à la ressource locale, puis utiliser le chemin relatif local pour le référencer dans le fichier HTML.

1. Créez un nouveau dossier fonts dans le répertoire racine du projet et extrayez les fichiers de polices téléchargés dans ce dossier. 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地址可能受到网络影响，所以最好提供多个备选方案。修改方式如下：

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

Entrez le fichier uni.scss et introduisez le fichier de police, comme indiqué ci-dessous :

rrreee

Il convient de noter ici que font-family@font-face Le nom de /code> doit être cohérent avec le nom de la police utilisée en HTML.

🎜Utilisez les icônes de police dans les fichiers HTML comme suit : 🎜rrreee🎜Ici, uni-icon-wode est le nom de la classe d'icônes que nous avons personnalisé dans le fichier de police, et uni-icon code> est la classe de base définie dans uni.scss. 🎜🎜🎜🎜Si vous résolvez le problème selon lequel l'icône de la police ne peut pas être affichée via cette méthode, alors félicitations, le problème a été résolu. Cependant, parfois, même si nous avons suivi les méthodes ci-dessus, l'icône de la police ne peut toujours pas s'afficher normalement. Dans ce cas, vous pouvez essayer la méthode suivante. 🎜🎜2. Utilisez cdn🎜🎜Parfois, nous constatons que la référence locale du fichier de police échoue, nous pouvons alors envisager d'utiliser cdn pour résoudre le problème. Cependant, lorsque nous utilisons CDN, nous devons nous assurer que l'adresse CDN que nous introduisons est correcte, et comme l'adresse CDN peut être affectée par le réseau, il est préférable de proposer plusieurs alternatives. La méthode de modification est la suivante : 🎜🎜🎜🎜Dans le fichier manifest.json, ajoutez l'adresse de ressource du fichier de police, comme indiqué ci-dessous : 🎜rrreee🎜où xxxxx.com code> nous est spécifié. Le nom de domaine du cdn. 🎜🎜🎜🎜Utilisez l'adresse cdn dans le fichier <code>uni.scss, comme indiqué ci-dessous : 🎜rrreee🎜Le // signifie ici que le chemin relatif avec le même protocole est utilisé, qui convient à http, https, etc. 🎜🎜🎜🎜Utilisez les icônes de police dans les fichiers HTML comme suit : 🎜rrreee🎜De même, uni-icon-wode voici le nom de la classe d'icônes que nous avons personnalisé dans le fichier de police. 🎜🎜🎜🎜Il convient de noter que l'utilisation de CDN peut également rencontrer d'autres problèmes, tels que des connexions instables, des fichiers dépassant les limites du cache, etc., vous devez donc effectuer davantage de tests et de plans de sauvegarde. 🎜🎜En général, les icônes de police sont une solution d'icônes efficace et légère lors de l'utilisation d'uniapp pour développer des applications mobiles, mais les icônes de police peuvent apparaître en raison de problèmes tels que la complexité de l'emballage et la façon dont les ressources sont gérées. La situation ne peut pas être affichée normalement. Les deux méthodes ci-dessus peuvent nous aider à résoudre ces problèmes et à rendre nos applications plus belles et plus pratiques. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!