WeChat アプレット wxss で外部 CSS ファイルとアイコンフォントを参照する方法

原因

外部ファイルをミニプログラムにインポートする方法は次のとおりです: @import "*/*.wxss";

ビジネス上のニーズにより、開発中の小規模プログラムでアイコンフォントを使用する必要があり、H5 の導入方法を考えるのは簡単です。

「」
@font-face {font-family: "アイコンフォント";
 ソース: url('iconfont.eot?t=1485242349767'); /* IE9*/
 src: url('iconfont.eot?t=1485242349767#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('iconfont.woff?t=1485242349767') format('woff'), /* chrome, firefox */
 url('iconfont.ttf?t=1485242349767') format('truetype'), /* chrome、firefox、opera、Safari、Android、iOS 4.2+*/
 url('iconfont.svg?t=1485242349767#iconfont') format('svg'); /* iOS 4.1以降 */
}

.アイコンフォント{
 フォントファミリ:"アイコンフォント" !重要;
 フォントサイズ:16px;
 フォントスタイル:通常;
 -webkit-font-smoothing: アンチエイリアス;
 -moz-osx-font-smoothing: グレースケール;
}

「」

この CSS スタイルはユニバーサルなので、lib/style/font.wxss に配置されます。ファイル ディレクトリは次のとおりです。

@import を通じて必要なファイルに導入されますが、効果はありません。

理由:アプレットの wxss ファイルの font-face URL は、http アドレスをパラメータとして受け入れませんが、base64 を受け入れることができます。したがって、まずフォント ファイルをダウンロードし、それを base64 に変換してから参照することができます。

解決策は次のとおりです。

1. まず、Alibabaベクターアイコンライブラリ（http://iconfont.cn/）にアクセスして、独自のフォントアイコンを生成し、ダウンロードして、ttf形式のファイルを見つけます。

2. このプラットフォーム https://transfonter.org/ にアクセスし、フォントファイルをbase64形式に変換します。

3. libファイルに導入する

4. wxssにフォントを追加する

5. 表示効果

要約する

WeChatミニプログラムwxssが外部CSSファイルとアイコンフォントを参照する方法についての説明はこれで終わりです。ミニプログラムwxssが外部ファイルを参照することに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。