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 をサイレント インストールする詳細なグラフィック チュートリアル

推薦する

Tomcat プロジェクトを展開する一般的な方法のいくつか [テスト済み]

1 / Webプロジェクトファイルをwebappsディレクトリに直接コピーするこれは最も一般的に使...

jquery+springbootでファイルアップロード機能を実現

この記事の例では、ファイルアップロード機能を実現するためのjquery+springbootの具体的...

MySQL のファントムリード問題を解決する方法

目次序文1. ファントムリーディングとは何ですか? 2. ファントムリーディングの問題点は何ですか?...

CSSテーマを簡単に切り替える方法の詳細な説明

最近、個人の Web サイトに非常にシンプルなカラー スキーム (テーマ) スイッチャーを追加しまし...

MySQLでSELECT文が実行される仕組み

目次1. マクロの観点からMySQLを分析する2. SQL ステートメントを実行するには、どの程度の...

ウェブページの画像を素早く表示する方法とテクニック

1. .jpg ではなく .gif を使用します。GIF は JPG に比べてサイズが小さくなります...

Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例

Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例動作フレームワーク...

mysql エラー 1045 (28000) - ユーザーへのアクセスが拒否される問題を解決する方法

問題の説明 (以下の説明は Windows 環境に限定されます): D:\develop\ide\m...

MySQL クロステーブルクエリとクロステーブル更新

SQL の基礎知識がある友人は、「クロステーブル クエリ」について聞いたことがあるはずですが、クロス...

中央のテキストの両側に水平線を描くためのCSS

1. vertical-align プロパティは次の効果を実現します。 vertical-alig...

nginxリバースプロキシのマルチポートマッピングの実装

コードの説明1.1 http:www.baidu.test.com のデフォルトは 80 で、リバー...

Nginx 最適化サービスで Web ページ圧縮を実装する方法

リソースを節約するためにWebページの圧縮を設定する1.まず、設定を変更しましょう vim /usr...

node.js グローバル変数の具体的な使用法

グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...

Hyper-V の紹介とインストールと使用 (詳細な図解)

はじめに:IT 業界の巨人である Microsoft 独自の仮想化技術は、VMware や Citr...

TypeScript の条件型に関する詳細な読書と実践記録

目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...