uniappをパッケージ化した後にフォントアイコンが表示されない場合はどうすればよいですか?-uni-app-php.cn

uniappをパッケージ化した後にフォントアイコンが表示されない場合はどうすればよいですか?

PHPz

リリース： 2023-04-18 10:01:51

オリジナル

1630 人が閲覧しました

近年、フロントエンド技術の継続的な発展に伴い、軽量アイコンソリューションとしてフォントアイコンが Web やモバイルのデザインで広く使用されています。 uniappを使ってモバイルアプリを開発する場合、フォントアイコンも簡単に利用できますが、パッケージ化後にフォントアイコンが正しく表示されないという問題がよく発生します。今回は、uniappをパッケージ化した後にフォントアイコンが表示されない原因と解決策について説明します。

原因分析

1. フォントファイルが正常にロードされませんでした

まず、uniapp がパッケージ化後に dist ディレクトリを生成し、その内容を理解する必要があります。このディレクトリには、さまざまなリソースファイルと HTML ファイルが含まれる最終的な公開アプリケーションが配置されます。フォントアイコンを使用する場合、実際にはHTMLファイル内でCSSスタイルを使用し、データソースをフォントアイコンのフォントファイルに設定するため、HTMLファイルまたはフォントファイルで問題が発生する可能性があります。

最も一般的な状況は、フォントファイルが正常にロードされず、フォントアイコンが表示されないことです。 F12 開発者ツールを使用してコンソール出力を表示できます。404 またはネットワークエラーが発生し、フォントファイルが要求失敗ステータスにある場合は、フォントファイルが正常に読み込まれていないと判断できます。

2. アドレスエラー

もう 1 つの可能性は、フォントを導入したアドレスが間違っていることです。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 ファイル内でフォントアイコンを次のように使用します。
```
<i class="uni-icon uni-icon-wode"></i>
```
ログイン後にコピー
ログイン後にコピー
ここで、uni-icon-wode がフォント内にあるものです。 file カスタマイズされたアイコンクラス名。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": [
   ]
}

ログイン後にコピー

wherexxxxx.comCDN のドメイン名を指定してください。

uni.scss ファイル内の cdn アドレスを次のように使用します。
```
@font-face{
    font-family:'iconfont';
    src:url(//xxxxx.com/fonts/iconfont.ttf) format('truetype');
}
```
ログイン後にコピー
ここでの // は、 http、https などに適した、同じプロトコルの相対パスが使用されます。
HTML ファイル内でフォントアイコンを次のように使用します。
```
<i class="uni-icon uni-icon-wode"></i>
```
ログイン後にコピー
ログイン後にコピー
同様に、uni-icon-wode は次のとおりです。フォントファイル内のカスタマイズされたアイコンクラス名。

CDN を使用すると、接続が不安定になったり、ファイルがキャッシュ制限を超えたりするなど、他の問題が発生する可能性があるため、より多くのテストとバックアップ計画が必要になることに注意してください。

一般に、フォントアイコンは、uniapp を使用してモバイルアプリケーションを開発する場合に優れた軽量のアイコンソリューションですが、パッケージ化の複雑さやリソースの処理方法などの問題により、フォントアイコンが適切でない場合があります。フォントアイコンが正しく表示されない場合があります。上記の 2 つの方法は、これらの問題を解決し、アプリケーションをより美しく実用的なものにするのに役立ちます。

以上がuniappをパッケージ化した後にフォントアイコンが表示されない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。