問題タブ [webfont-loader]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
207 参照

css - WebFontLoader: バニラの font-family 宣言がフォールバックに十分でないのはなぜですか?

WebFontLoaderを使用してフォントを読み込むのが好きです。それは私にとってうまくいった迅速な解決策です。私は通常、自分のページに次のようなものを配置して、非同期で使用します<head>

次に、CSS で次のようにします。

私は最近 WebFontLoader について読んでいますが、私が目にするほとんどの例 (これに関する 1 つの記事があります) では、WFL が<html>要素に適用するクラスを使用して、フォントが読み込まれて準備ができているかどうかを検出します。使用する:

私の質問は: システム バックアップを使用して通常のフォント スタックを宣言するだけでは不十分なのはなぜですか? font- familyのポイントは、最初のものが認識されない場合、自動的に他のものにフォールバックすることではないでしょうか?

ブラウザが、スタック内の最初のフォントがシステム フォントではないことを認識した場合、バックアップがあるにもかかわらず、デフォルトでその要素を非表示にするか、またはそのようなものでしょうか?

0 投票する
0 に答える
775 参照

javascript - Web Font Loader 使用後の「レンダリング ブロック ファイルとしてのスクリプト」

Google Web フォントの読み込みが原因で発生したGoogle Pagespeedのインサイトから、「レンダリング ブロック ファイルとしてのスクリプト」エラーを削除しようとしています。インターネットから、 Web Font Loaderを使用してフォントを非同期にロードするように指示されます。次の JavaScript をフッターに配置しました。フォントは適切に読み込まれますが、ページ速度のインサイトの結果にレンダリング ブロック エラーが表示されます。

注: Font Render のブロック エラーは、モバイル テストでのみ表示され、デスクトップでは表示されません。

編集:

body タグを閉じる前にスクリプトを追加しようとすると、引き続きレンダリング ブロック ファイル エラーが発生します。

ここに画像の説明を入力

0 投票する
1 に答える
1357 参照

javascript - Google WebFontLoader を使用して URL でカスタム フォントを読み込む方法

WebFontLoader を使用して、実行時にオンデマンドでフォント (.ttf、.otf) をロードする必要があります。

すべてのフォントには fontFamily と url しかありません。

WebFontLoader には、次のような .css ファイルを使用してフォントをロードするオプションがあるようです。

.css ファイルを使用せずにフォント ファイルへの直接パスを使用する方法はありますか?

フォント ファイルを保存するために外部サイトを使用したくありません。