uview の u-icon コンポーネントは、「ローカル フォント リソースのロードに失敗しました」または「フォントのロードに失敗しました」というエラーを報告します。

問題: フォント アイコンは h5 では正常に表示されますが、WeChat アプレットでは正しく表示されません

正規のドメイン名を設定しても失敗したため、ローカルで直接取得することにしました。

uview はリモート フォント アイコンをインポートします

@font-face {
	font-family: 'uicon-iconfont';
	src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf')format('truetype');
}

1. uviewのフォントアイコンファイルをダウンロードする

リソースのダウンロード | uView 2.0 - nvue と完全互換の uni-app エコロジカル フレームワーク - uni-app UI フレームワーク (uviewui.com)

 

2. 不要なフォントアイコンを削除する

Base64 形式に変換する必要があるため、ファイルが大きすぎないように注意してください。

フォントエディタ (kekee000.github.io)

3. ttfファイルをbase64ファイルに変換します

簡単な方法で TTF を Base64 にエンコードします。| アスポーズ

 

4. u-iconファイルを変更する

u-icon ファイルを見つけます

Base64フォントアイコンを貼り付け

@font-face {     font-family: 'uicon-iconfont';     src: url('data:application/x-font-woff2;charset=utf-8;base64、base64 文字に変換')          format('truetype' ) ; }