特に Android の場合、クロスドメインミニプログラムフォントファイルによって引き起こされるフォント読み込みエラーの解決策

フォントスキームをロードする

携帯電話を使用している場合は、loadFontFace API を使用してフォントファイルを読み込む必要があります。uniapp または WeChat を使用できます。使用方法については、公式 Web サイトの説明を参照してください。uni.loadFontFace(Object object ) | uni-app 公式サイト

css読み込み方式だとフォント失敗バグの原因が特定できない場合がありますが、loadFontFaceには読み込み失敗用のインターフェースが用意されているので、エラーの原因を確認することができます。 CSS を使用したフォントの使用はお勧めしません。

@font-face {
    font-family: 'hado-font';
    src: url('https://字体文件链接');
}

loadFontFace の API コードを使用します。app.vue の onLunch フック関数で使用します。

  // 加载网络字体
  uni.loadFontFace({
    family: 'hado-font',
    global: true,
    source: 'url("https://你的域名字体文件地址")',
    success() {
      console.log('hado-font加载成功')
    },
    fail(err) {
      console.log('hado-font加载失败', err)
    },
    complete() {
      console.log('hado-font字体加载');
    }
  })

問題の再発

フォントの読み込みに失敗し、有効になりませんでした: この問題は主に Android モバイルアプレットと h5 エンドに存在します。Apple モバイルアプレットは存在しないようですが、問題の理由は同じです。つまり、cors クロスドメインが発生します。以下はh5側のクロスドメインです

Android 携帯電話では、「loadFontFace:fail」というエラーが報告されますが、これはクロスドメインが原因ではありませんが、フォントファイルやリンクに問題がない場合は、次のエラーが発生します。クロスドメイン。

解決

前提条件の注意: フォントファイルのリンクは https である必要があり、フォントファイルは正常に使用できる必要があります。ミニプログラムのバックグラウンドで、downloadFile の正当なドメイン名リストにドメイン名を追加します。また、合法的なドメイン名のリストを要求します。

1. サーバーまたは nginx でクロスドメインを許可するように設定します。これを行うには、nginx クロスドメインを設定します。nginx 設定ファイルを見つけて、nginx 設定を追加します。

location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$
{
  add_header Access-Control-Allow-Origin *;
}

構成が正しいかどうかを確認します。ok と成功は問題がないことを示します

 sudo nginx -t

設定に問題がなければ、設定ファイルをリロードして nginx を再起動する必要があります。設定ファイルを有効にします。

nginx -s reload

その後、再度開いてみると、フォントが正常に読み込まれていることがわかりました。h5 に問題がない限り、Android スマートフォンでも問題ありません。