原因外部ファイルをミニプログラムにインポートする方法は次のとおりです: @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を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLのexecute、executeUpdate、executeQueryの違い
>>: VMware 上の CentOS に Oracle12.2 をサイレント インストールする詳細なグラフィック チュートリアル
目次プロジェクトの背景改善案データ特性を観察するマルチプロセスアイデアの要約データ処理スキルプロジェ...
Web プロジェクトでは、タイムライン コントロールをよく使用します。この記事では、項目ごとに展開で...
目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...
レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...
キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。...
今日は、データベース遅延ジャンプに関する別の典型的な問題を分析しました。このプロセスでは、参考のため...
はじめに<br />前回の記事「私の CSS アーキテクチャ コンセプト」では、公園で友...
以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...
目的: ステーションAをステーションBのセカンダリディレクトリとして扱うのように: http://w...
1. redisイメージを検索する docker 検索 redis 2. Redisイメージをダウン...
目次折りたたむ(減らす) for...of の使用whileループの使用折り畳み実装に近い展開する配...
前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...
要素に関するいくつかの属性フロントエンドの日常的な開発では、一部のページのプロパティを取得または監視...
余計なことは言わないで、コードだけ見てみましょう〜 # docker-compose をダウン # ...
1. はじめにあなたのウェブサイトはまだインターネット上に公開されたままですか?ここでは、HTTPS...