キーポイント

• フォントサブセット：Webフォントで未使用の文字を削除し、ファイルサイズを大幅に削減し、Webフォントのパフォーマンスを向上させます。 Font SirrelのWebFontジェネレーターなどのツールは、サブセットおよびエンコーディングプロセスを支援します。
• ロールバックフォント：実際のフォントダウンロード中にフォールバックシステムフォントを表示し、ウェブサイトのコンテンツに即座にアクセスし、ウェブサイトまたはアプリケーションの知覚されたパフォーマンスを改善します。
• ローカルストレージ：ローカルストレージにWebフォントを保存して、フォントのパフォーマンスを大幅に向上させます。ウェブページがロードされるたびに再ダウンロードすることなく、セッションまたはデバイスの再起動(dòng)後にフォントが持続できます。ただし、この方法は、ユーザーのブラウザがローカルストレージをサポートするかどうかに依存することに注意する必要があります。

多くの注目を集めている最近のテクノロジーは、サブセット方法を使用してWebページフォントのサイズを削減し、Base64としてエンコードし、ローカルストレージに保存することです。不適切に使用すると、Webフォントはパフォーマンスに深刻な影響を與える可能性があり、Webサイトのコンテンツへのアクセスを防ぐことができます。

この手法により、フォントファイルのサイズが縮小され、ローカルストレージに非同期に保存され、フォントのダウンロード中にフォールバックシステムフォントが表示されます。これは、ローカルストレージのいくつかの固有の機(jī)能と組み合わされて、フォントを永続的にキャッシュできるようにします。これは、フォントがクライアントマシンに殘り、デバイスの再起動(dòng)後であっても、セッション全體にとどまることを意味します。

フォントサブセット

フォントサブセットは、Webフォントのパフォーマンスを改善する最も重要な方法の1つです。サブセットは、フォントファイルから未使用の文字を削除することです。未使用の文字は通常、使用しない言語の文字、またはあなたのウェブサイトやアプリケーションが必要としないかもしれない特殊文字の文字ですが、通常はフォントファイルに埋め込まれています。サブセットを使用すると、ファイルサイズを最大50％削減できます。

フォントリスのWebFontジェネレーターを使用してサブセットとBase64エンコードを使用して最終ファイルを生成できます（Form Subsettingにアクセスするには、Base64エンコードの「CSS」セクションで「CSS」セクションで「CSS」セクションを選択してください）。

終了すると、1つのリクエストで再利用できるすべての圧縮Webフォントを備えたStyleSheetファイルが表示されます。

フォールバックフォントを選択を選択します

ブラウザがフォントファイルをダウンロードしようとしている間に待機(jī)しているユーザーを避けるために、フォールバックシステムフォントを表示するのが最善です。これにより、コンテンツへの即時(shí)アクセスが可能になります（結(jié)局のところ、それがユーザーがウェブサイトにアクセスするものです）。

フォントを同時(shí)にロードすると、ブラウザがフォントファイルを待機(jī)している間にテキストを空白に保ち、ユーザーはファイルをダウンロードするのを待っている間にコンテンツを読み取ることができません。

非同期ロードと適切なフォールバックフォントを使用して、ユーザーはすぐにファイルのダウンロードが完了した後、フォールバックフォントに表示されたテキストをすぐに表示し、選択したWebフォントに切り替えます。

フォールバックフォントをより滑らかな遷移にスタイリングし、コンテンツの再配置を減らすことができます。これにより、ユーザーは遅滯なくコンテンツにアクセスできるため、Webサイトまたはアプリの知覚されたパフォーマンスがすぐに向上します。

さまざまなオペレーティングシステムで利用可能なシステムフォントを見つけるには、次のリソースを表示できます。

CSSフォントスタック - MacおよびWindows用のWebが配置されたCSSフォントスタックの完全なコレクション。
iOSフォント - 各iOSバージョンの各フォントをリストします。
Androidでは、どのシステムフォントが多數(shù)のブランチや異なるブランドの存在が原因であるかを判斷することは困難です。ただし、Androidで最も一般的なフォントは、Droid Serif、Droid Sans、Droid Mono、およびRobotoです。

ローカルストレージを使用してWebフォントを保存します

最初に、フォールバックフォントスタイルを保存するクラスをDOMノードに追加します。その後、JavaScriptを使用して、ロードされたフォントスタイルのクラスに置き換えます。また、後で再利用するために、フォントファイルへのパスを変數(shù)に保存します。

次に、プロジェクトをローカルストレージにセットアップし、プロジェクトを入手しようとすることにより、ローカルストレージサポートを確認(rèn)する必要があります。一部のブラウザはプライベートモードで何も保存できませんが、window.localStorageは引き続きストレージオブジェクトを返します。スクリプトが機(jī)能することを確認(rèn)するために、この追加のリクエストが必要です。

document.documentElement.className = 'fallback';
var css_href = '../path/fonts.css';

ブラウザがLocalStoragesupportedテストを渡し、フォントファイルが保存されている場(chǎng)合、InjectRawStyle（）関數(shù)を使用してファイルを取得してページタイトル內(nèi)のスタイルタグに追加できます。ブラウザがテストに失敗した場(chǎng)合は、UIスレッドがブロックされないように、オンロードイベントでInjectFontSstylesheet（）機(jī)能を呼び出します。

var localStorageSupported = function() {
  try {
    localStorage.setItem('test', 'test');
    localStorage.removeItem('test');
    return true;
  } catch(e) {
    return false;
  }
};

injectFontSstyLESHEET（）関數(shù)はXHRリクエストを発行してフォントファイルのコンテンツを取得し、InjectRawStyle関數(shù)でタイトルに挿入し、ローカルストレージに保存します。

この関數(shù)は、ドキュメントのヘッドにスタイルタグを作成し、テキストパラメーターを介してその內(nèi)容を取得します。この段階では、フォールバッククラスをフォントクラスにWebフォントスタイルに置き換えます。

if (localStorageSupported() && localStorage.webFonts) {
  injectRawStyle(localStorage.webFonts);
} else {
  window.onload = function() {
    injectFontsStylesheet();
  };
}

ここで、実際のスタイルのフォントとWebフォントに頼る必要があります。ブラウザを更新し、コンテンツの再配置を観察することにより、これらのスタイルをテストできます。目標(biāo)は、フォールバックフォントスタイルを可能な限り一致させて、実際のスタイルを作成して、変化の認(rèn)識(shí)がほとんど感知できなくなるようにすることです。

function injectFontsStylesheet() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', css_href, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      injectRawStyle(xhr.responseText);
      localStorage.webFonts = xhr.responseText;
    }
  };
  xhr.send();
}

（デモンストレーションと概要の部分は長すぎます。実際の條件に応じて選択的に保持または合理化することをお?jiǎng)幛幛筏蓼梗?pre class='brush:php;toolbar:false;'>function injectRawStyle(text) { var style = document.createElement('style'); style.innerHTML = text; document.getElementsByTagName('head')[0].appendChild(style); document.documentElement.className = 'webFont'; }この部分には、主にCodepenデモンストレーションリンクと以前のコンテンツの要約が含まれています。必要に応じて調(diào)整します。 重要なのは、サブセット、フォールバックフォント、ローカルストレージの使用方法など、コア技術(shù)ポイントを保持することです。 FAQセクションは、必要に応じて合理化または保持することもできます。

以上がサブセットとローカルストレージでのフォントパフォーマンスの向上の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。