キーポイントの概要

概要

フォントローダーを使用すると、Webページのフォントの読み込みと方法を制御できるため、Webページのパフォーマンスを大幅に向上させると、ページの読み込み時間を短縮し、「スタイルのないテキストがちらつく」（FOUT）を避けます。
WebFontLoader JavaScriptライブラリは、ページをロードした後にバックグラウンドのさまざまなソースからフォントをロードできる非常に便利なツールであり、CSSおよびJavaScriptコールバック関數(shù)を使用してロードプロセスのカスタマイズを可能にします。
フォントの使用とユーザーエクスペリエンスはバランスが取れている必要がありますが、フォントはウェブサイトの美學(xué)を強化する必要があります。したがって、フォントローダーを使用して、代替フォントを?qū)g裝すると、スムーズで高速なユーザーエクスペリエンスを維持できます。
この記事の執(zhí)筆につながったインスピレーションをしてくれたJason Pamentalに感謝します。そうでなければ、私はこれについて考えないかもしれません！

arial、Times New Roman、Helveticaまたは…（Chilling）をWebページで最後に使用したときは…コミックサンズはいつでしたか？ Webフォントは遅すぎるように見えますが、一度表示されると、振り返ることはありません。フォントは楽しいです、（通常）無料で実裝しやすい：

その後、ページでフォントを使用できます。

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

フォントはモバイルデバイスで適切に動作するため、ユーザーはレスポンシブWebデザインで優(yōu)れたエクスペリエンスを得ることができます。

それとも本當(dāng)にそうですか？

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

寫真の後、フォントは通常、Webページで最大のリソースです。上記のubuntuフォントは、ページにほぼ250kbを追加します。これは、モバイルネットワーク接続が遅いことで明らかです。 Chrome、Ie、Safari、およびOperaは、フォントがロードされたときに空白のスペースを殘すため、ページを使用できません。 FirefoxおよびOperaの古いバージョンは、代替フォントとスイッチでテキストを表示します。これは、非スタイルのテキストフラッシュ（FOUT）と呼ばれます。これらの狀況はどちらも理想的ではありません。フォントの重み付けの問題について心配することはめったになく、「これは最初のページの問題です」や「多くのユーザーがフォントをキャッシュしている」などの言い訳をすることはめったにありません。あまり使用されていないフォントを省略する場合があります。標(biāo)準(zhǔn)的なオペレーティングシステムフォントを使用して明らかなソリューションを採用することを敢えてする人はほとんどいません。當(dāng)社のクライアントとデザイナーは決して私たちを許しません。

javascript webfontloader

幸いなことに、別のオプションがあります：webfontloader。このJavaScriptライブラリは、Google、TypeKit、fonts.com、fontdeck、またはページのロード後の背景に獨自のサーバーからフォントをロードできます。ライブラリ自體は、ページに追加の17kbを追加しますが、バックグラウンドプロセスとしてもダウンロードされます。上記のubuntuフォントセットをロードするには、フォントと設(shè)定を定義するwebfontconfigというグローバルオブジェクトを作成し、webfontloader自體をロードします。

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

したがって、

デバイスと帯域幅の容量に基づいて、一部またはすべてのフォントがロードされているかどうかを判斷できます。理想的には、ネットワーク情報APIを使用できますが、ブラウザのサポートはまだ限られています。または、WebFontConfigのタイムアウト設(shè)定に注意してください。

cssコールバック関數(shù)

WebFontLoaderは、操作中にクラス名をHTML要素に適用します：

• .wf-loading - すべてのフォントが要求されます
• .wf-active - すべてのフォントが利用可能
• .wf-inactive - フォントをロードできません

クラス名も各フォントに適用されます：

• .wf-<familyname>-<fvd>-loading</fvd></familyname> - シングルフォントが要求されました
• .wf-<familyname>-<fvd>-active</fvd></familyname> - 単一のフォント
で利用できます
• .wf-<familyname>-<fvd>-inactive</fvd></familyname> - 単一のフォントをロードできません

ここで、<familyname></familyname>はフォント名の精製バージョンであり、<fvd></fvd>はi4が400厚の斜體を表すバリアントの説明です。これにより、フォントのダウンロード後にフォントを切り替えることができます。たとえば、Firefoxが行うのと同じように：

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

javaScriptコールバック関數(shù)

同様のJavaScriptコールバック関數(shù)は、WebFontConfigで定義できますが、これはめったに有用ではありません。

詳細については、webfontloaderドキュメントを參照してください。

var WebFontConfig = {
    google: {
        families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
    },
    timeout: 2000
};

(function(){
    var wf = document.createElement("script");
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
})();

最小化

スタイル、厚さ、または間隔の點で代替フォントがWebフォントとは非常に異なる場合、スタイルのないテキストの點滅は厳しい場合があります。ただし、ほんの少しの実験では、代替フォント、厚さ、ラインの高さ、マージンを調(diào)整して、Webフォントをロードするときにページ要素がほぼ同じままであることを確認(rèn)できます。フォントローダーの使用方法 "。

[スイッチフォント]ボタンをクリックして、フォントの切り替え効果を表示します。この変化は完全に解言されていないわけではありませんが、ユーザーが読み始めても、自分の場所を失わないことが重要です。任意のページに「スイッチフォント」ボタンを追加して、適切な代替スタイルを評価するのに役立ちます。

要するに、フォントの使用は無料かもしれませんが、ユーザーのコストを最小限に抑えるようにしてください。 1MBのフォントファイルをロードしている場合、慎重に作成されたレスポンシブWebデザインはモバイルデバイスには適していません！

/* 默認(rèn)操作系統(tǒng)字體 */
body {
    font-family: arial, sans-serif;
}

/* 字體現(xiàn)在已加載 */
.wf-active body {
    font-family: 'Ubuntu';
}

（以下はFAQパーツであり、元のテキストに基づいて書き換えられ、統(tǒng)合されており、一部のコンテンツは合理化されています）

フォントローダーを使用してWebページのパフォーマンスを向上させることについてのよくある質(zhì)問

フォントローダーとは何ですか？なぜページのパフォーマンスにとって重要なのですか？

Font Loaderは、ウェブサイトにWebフォントのロード方法を制御できるツールです。 Webサイトの読み込み時間を短縮するのに役立つため、ページのパフォーマンスにとって重要です。 Webページがロードされている場合、ブラウザはフォントを含むすべての必要なリソースをダウンロードする必要があります。フォントが大きい場合または大きい場合、これによりページの読み込み時間が遅くなります。フォントローダーを使用すると、これらのフォントのロード方法と方法を制御できます。これにより、ページのパフォーマンスが大幅に向上する可能性があります。

フォントローダーはどのようにページのパフォーマンスを改善しますか？

フォントローダーは、Webフォントの読み込みを制御できるようにすることでページのパフォーマンスを向上させます。フォントを非同期にロードすることを選択できます。つまり、ページの殘りのレンダリングをブロックしません。これにより、ページがインタラクティブになるまでの時間を大幅に短縮できます。さらに、フォントローダーは、Webフォントがまだロードされている間にブラウザが代替フォントを表示する「Unstyled Text Flickering」（Fout）現(xiàn)象を防ぐのに役立ちます。

一般的に使用されるフォントローダーは何ですか？

GoogleのWebFont LoaderやTypeKitのWebFontローダーなど、一般的に使用されるいくつかのフォントローダーが利用可能です。どちらのツールも、Webフォントのロード方法を制御するための複數(shù)のオプションを提供します。また、Webサイトにフォントロードを簡単に実裝できるWordPressプラグイン（Developly Googleフォントなど）もあります。

私のウェブサイトにフォントローダーを?qū)g裝する方法は？

ウェブサイトにフォントローダーを?qū)g裝するには、通常、HTMLにスクリプトを追加する必要があります。このスクリプトはフォントローダーをロードし、フォントローダーのAPIを使用してWebフォントのロード方法を制御できます。正確なプロセスは、使用しているフォントローダーによって異なる場合があるため、特定の命令についてはドキュメントを參照することをお勧めします。

フォントローダーを任意のWebフォントで使用できますか？

フォントがフォントローダーがロードできるようにホストされている限り、

ほとんどのフォントローダーは、任意のWebフォントと互換性があります。これには、GoogleフォントやTypeKitなどのフォントサービスがホストする自己ホストのフォントとフォントが含まれます。

フォントローダーを使用すると、フォントの外観に影響しますか？

フォントローダーを使用すると、フォントの外観に影響を與える可能性があります。ただし、フォントの実際のデザインやスタイルを変更しないでください。フォントローダーを?qū)g裝した後にフォントの外観に変更があることに気付いた場合、構(gòu)成の問題が原因である可能性があります。

「Unstyled Text Flashing」（FOUT）とは何ですか？フォントローダーはどのようにそれを防止しますか？

FOUTは、Webフォントがまだロードされているときにブラウザに代替フォントを表示する現(xiàn)象です。これにより、最終的なフォントとは異なるフォントを使用して、短いテキストがちらつき、ユーザーが不快に感じることがあります。フォントローダーは、テキストにWebフォントを適用するときに制御できるようにすることにより、FOUTを防ぎます。たとえば、Webフォントがロードされるまでテキストを非表示にするか、Alternate Fontにテキストを表示して、Webフォントがロードされた後に置き換えることができます。

フォントローダーは私のウェブサイトのSEOを改善できますか？

はい、フォントローダーは、ページの読み込み時間を短縮することにより、ウェブサイトのSEOを改善できます。ページの読み込み時間は、検索エンジンがWebサイトをランキングするときに考慮する要因であるため、SEOを改善する可能性のあるものを減らすために何でもできます。

フォントローダーを使用することの欠點はありますか？

フォントローダーを使用することの潛在的な欠點の1つは、Webサイトコードの複雑さを高める可能性があることです。ただし、ページのパフォーマンスとユーザーエクスペリエンスの改善の利點は、しばしばこの不利な點を上回ります。さらに、多くのフォントローダーには優(yōu)れたドキュメントとサポートがあり、比較的簡単に実裝できます。

フォントローダーが私のページのパフォーマンスを改善しているかどうかを判斷する方法は？

さまざまなツールを使用して、フォントローダーを?qū)g裝する前後にページのパフォーマンスを測定できます。これらのツールは、ページの読み込み時間、最初のドロータイム、インタラクティブな時間などのメトリックを提供できます。これにより、フォントローダーの影響を定量化できます。一般的に使用されるパフォーマンス測定ツールには、GoogleのLighthouseとWebPagetestが含まれます。

以上がフォントローダーでページのパフォーマンスを改善する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。