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

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を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChat アプレットに wxml、wxss、js をインポートする方法の例
  • WeChat アプレットは wxss 属性を実装します。js を介して wxml を操作する例です。
  • wxssを使用して画像を読み込み、WeChatアプレットでアニメーション効果を実現します
  • Webstrom で WeChat アプレットの wxml および wxss ファイルのサポートを実装
  • WeChat アプレット レス ファイルを wxss ファイルにコンパイルする方法
  • WeChat ミニプログラムチュートリアル: WXSS
  • WeChat ミニプログラム WXML、WXSS、JS の紹介と詳細な説明
  • WeChat ミニプログラム WXSS スタイルファイルチュートリアル

<<:  MySQLのexecute、executeUpdate、executeQueryの違い

>>:  VMware 上の CentOS に Oracle12.2 をサイレント インストールする詳細なグラフィック チュートリアル

推薦する

単一の MySQL テーブルで数千万のデータを処理するアイデアを共有する

目次プロジェクトの背景改善案データ特性を観察するマルチプロセスアイデアの要約データ処理スキルプロジェ...

ccs3に基づくタイムライン実装方法

Web プロジェクトでは、タイムライン コントロールをよく使用します。この記事では、項目ごとに展開で...

11 の素晴らしい JavaScript コード リファクタリングのベスト プラクティスの概要

目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...

CSS フォーム検証機能の実装コード

レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...

Vue のキーボードイベント監視の概要

キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。...

MySQLデータ遅延ジャンプの問題の解決策

今日は、データベース遅延ジャンプに関する別の典型的な問題を分析しました。このプロセスでは、参考のため...

フロントエンドのパフォーマンス最適化 - フロントエンドエンジニアが話し合うべき問題点

はじめに<br />前回の記事「私の CSS アーキテクチャ コンセプト」では、公園で友...

Flask と Vue のフロントエンドとバックエンドを分離したプロジェクト展開のサンプル コード

以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...

IIS7 IIS8 リバースプロキシルールの記述、インストール、構成方法

目的: ステーションAをステーションBのセカンダリディレクトリとして扱うのように: http://w...

Dockeにredisをインストールする方法

1. redisイメージを検索する docker 検索 redis 2. Redisイメージをダウン...

JS での Reduce Fold Unfold の使用法の詳細な説明

目次折りたたむ(減らす) for...of の使用whileループの使用折り畳み実装に近い展開する配...

JavaScript排他的思考の具体的な実装

前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...

HTML 要素の高さ、offsetHeight、clientHeight、scrollTop などの詳細な説明。

要素に関するいくつかの属性フロントエンドの日常的な開発では、一部のページのプロパティを取得または監視...

設定ファイルを変更した後、操作を再開します

余計なことは言わないで、コードだけ見てみましょう〜 # docker-compose をダウン # ...

nginx を https をサポートするように設定するためのサンプル コード

1. はじめにあなたのウェブサイトはまだインターネット上に公開されたままですか?ここでは、HTTPS...