@font-face 宣言でローカル フォントを使用して Web パフォーマンスを最適化する方法

@font-face: ブラウザのダウンロードなしでローカル フォントを利用する

Web パフォーマンスを最適化するために、ブラウザは @ で指定されたフォントをダウンロードすることがよくあります。フォントフェイスの宣言。ユーザーのシステムがすでにフォントを所有している場合、これは冗長になる可能性があります。これを回避するには、@font-face 宣言で「local」キーワードを使用することを検討してください。

「local」キーワードを適用する

「local」キーワードを使用すると、次のことが可能になります。システムにインストールされた名前でフォントを参照します。これを利用するには、次のように指定するだけです:

<code class="css">@font-face {
  font-family: 'DejaVu Serif';
  src: local('DejaVu Serif'), ...;
}</code>

src リストの最初に「local」を置くと、ブラウザはダウンロードする前にローカルにインストールされたバージョンの DejaVu Serif を利用しようとします。

さらなる最適化

より包括的なフォントの最適化については、次の手順を検討してください。

• 複数のフォント形式を指定します。これにより、さまざまなブラウザ間の互換性が向上します。
• フォント ホスティング サービスを使用する: Font Squirrel のようなサービスは、最適化された Web フォントを提供し、キャッシュを管理してパフォーマンスを向上させます。
• CSSFontLoading API を利用する: この API を使用すると、フォントがロードされ準備ができているかどうかを確認できます。使用すると、不必要なフォントの読み込みが減ります。

以上が@font-face 宣言でローカル フォントを使用して Web パフォーマンスを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。