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

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

原因分析

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

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

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

2. アドレス エラー

もう 1 つの可能性は、フォントを導入したアドレスが間違っていることです。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 がフォント内にあるものです。 file カスタマイズされたアイコン クラス名。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": [
      ]
   }

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

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

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