Was soll ich tun, wenn das Schriftartensymbol nach dem Packen von Uniapp nicht angezeigt wird?

In den letzten Jahren, mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie, werden Schriftsymbole als leichtgewichtige Symbollösung häufig im Web- und Mobildesign verwendet. Wenn wir uniapp zur Entwicklung mobiler Anwendungen verwenden, können wir auch problemlos Schriftsymbole verwenden, es besteht jedoch häufig das Problem, dass die Schriftsymbole nach dem Packen nicht richtig angezeigt werden. Heute besprechen wir die Gründe und Lösungen dafür, warum das Schriftartsymbol nach dem Packen von Uniapp nicht angezeigt wird.

Ursachenanalyse

1. Die Schriftartdatei wurde nicht erfolgreich geladen

Zunächst müssen wir verstehen, dass nach dem Packen von uniapp der Inhalt in diesem Verzeichnis unsere endgültige veröffentlichte Anwendung sein wird Verschiedene Ressourcendateien und HTML-Dateien warten. Wenn wir Schriftartsymbole verwenden, verwenden wir tatsächlich CSS-Stile in der HTML-Datei und legen die Datenquelle auf die Schriftartdatei des Schriftartsymbols fest, sodass das Problem möglicherweise in der HTML-Datei oder Schriftartdatei auftritt.

Die häufigste Situation ist, dass die Schriftartendatei nicht erfolgreich geladen wurde, was dazu führt, dass das Schriftartensymbol nicht angezeigt wird. Sie können die Konsolenausgabe über die F12-Entwicklertools anzeigen. Wenn ein 404- oder Netzwerkfehler vorliegt und sich die Schriftartdatei im Status „Anforderung fehlgeschlagen“ befindet, kann festgestellt werden, dass die Schriftartdatei nicht erfolgreich geladen wurde.

2. Adressfehler

Eine andere Möglichkeit besteht darin, dass die Adresse, an der wir die Schriftart eingeben, falsch ist. Da Uniapp relative Pfade zum Einfügen von Ressourcendateien verwendet, müssen Sie sicherstellen, dass sich die HTML-Datei und die Schriftartendatei im selben Ordner befinden. Wenn ein Dateipfadfehler auftritt, wird das Schriftartsymbol nicht richtig angezeigt. Ebenso können Sie über die Konsolenausgabe feststellen, ob ein Pfadfehler vorliegt.

Lösung

1. Lokale Schriftartressourcen hinzufügen

Wenn die Schriftartdatei nicht erfolgreich geladen wird, können wir versuchen, die Schriftartdatei zur lokalen Ressource hinzuzufügen und dann den lokalen relativen Pfad zu verwenden, um in der HTML-Datei darauf zu verweisen.

1. Erstellen Sie einen neuen Ordner fonts im Stammverzeichnis des Projekts und extrahieren Sie die heruntergeladenen Schriftartdateien in diesen Ordner. 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

Geben Sie die Datei uni.scss ein und geben Sie die Schriftartdatei ein, wie unten gezeigt:

rrreee

Hier ist zu beachten, dass font-family@font-face Der Name von /code> muss mit dem in HTML verwendeten Schriftartnamen übereinstimmen.

🎜Verwenden Sie Schriftartsymbole in HTML-Dateien wie folgt: 🎜rrreee🎜Hier ist uni-icon-wode der Name der Symbolklasse, den wir in der Schriftartdatei angepasst haben, und uni-icon code> ist die in uni.scss definierte Basisklasse. 🎜🎜🎜🎜Wenn Sie das Problem lösen, dass das Schriftsymbol mit dieser Methode nicht angezeigt werden kann, dann herzlichen Glückwunsch, das Problem wurde gelöst. Selbst wenn wir die oben genannten Methoden befolgt haben, kann das Schriftartsymbol manchmal immer noch nicht normal angezeigt werden. In diesem Fall können Sie die folgende Methode ausprobieren. 🎜🎜2. Verwenden Sie cdn🎜🎜Manchmal stellen wir fest, dass der lokale Verweis auf die Schriftartdatei fehlschlägt. Dann können wir erwägen, das Problem mit cdn zu lösen. Bei der Verwendung von CDN müssen wir jedoch sicherstellen, dass die von uns eingegebene CDN-Adresse korrekt ist. Da die CDN-Adresse möglicherweise vom Netzwerk beeinflusst wird, ist es am besten, mehrere Alternativen bereitzustellen. Die Änderungsmethode ist wie folgt: 🎜🎜🎜🎜Fügen Sie in der Datei <code>manifest.json die Ressourcenadresse der Schriftartdatei hinzu, wie unten gezeigt: 🎜rrreee🎜wobei xxxxx.com code> wird für uns angegeben. Der Domänenname des CDN. 🎜🎜🎜🎜Verwenden Sie die CDN-Adresse in der Datei <code>uni.scss, wie unten gezeigt: 🎜rrreee🎜Der // bedeutet hier, dass der relative Pfad mit demselben Protokoll lautet verwendet, was für http, https usw. geeignet ist. 🎜🎜🎜🎜Verwenden Sie Schriftartsymbole in HTML-Dateien wie folgt: 🎜rrreee🎜In ähnlicher Weise ist uni-icon-wode hier der Name der Symbolklasse, den wir in der Schriftartdatei angepasst haben. 🎜🎜🎜🎜Es ist zu beachten, dass bei der Verwendung von CDN auch andere Probleme auftreten können, z. B. instabile Verbindungen, Dateien, die die Cache-Grenzen überschreiten usw., sodass Sie weitere Tests und Sicherungspläne durchführen müssen. 🎜🎜Im Allgemeinen sind Schriftsymbole eine gute und einfache Symbollösung, wenn Sie Uniapp zum Entwickeln mobiler Anwendungen verwenden. Aufgrund von Problemen wie der Komplexität der Verpackung und der Art und Weise, wie mit Ressourcen umgegangen wird, können Schriftartsymbole jedoch nicht normal angezeigt werden. Die beiden oben genannten Methoden können uns helfen, diese Probleme zu lösen und unsere Anwendungen schöner und praktischer zu machen. 🎜

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn das Schriftartensymbol nach dem Packen von Uniapp nicht angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!