不必要なダウンロードを避けるために @font-face ルールでローカル フォントを優先する方法は?

@font-face の使用: ローカル フォントの優先順位

@font-face は、カスタム フォントを Web ページに統合するための強力なツールです。ただし、フォントがユーザーのシステムにすでにインストールされている場合でも、ブラウザがそのフォントをダウンロードするとイライラすることがあります。

問題を理解する

@font-face ルールを定義するときは、次のように指定します。複数のソースファイル。通常、ブラウザはこれらすべてのファイルをダウンロードし、フォントをインストールします。デフォルトでは、ローカルにインストールされたフォントは考慮されません。

解決策: ローカル ファイルの優先順位付け

不要なダウンロードを防ぐために、@font-face ルールでローカル ファイルの優先順位を設定できます。構文は次のとおりです:

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

この例では、ブラウザーはまず、「MyFont」という名前のフォントがローカルにインストールされているかどうかを確認します。有効な場合は、ローカル バージョンが使用されます。それ以外の場合、ブラウザは指定された URL からフォントをダウンロードしてインストールします。

高度なローカル フォント検出

上記の方法は、ローカル ファイルに優先順位を付ける簡単な方法です。ただし、場合によっては、フォントがインストールされている場合でも、ブラウザーがフォントをダウンロードしてしまうことがあります。これに対処するには、より複雑なアプローチを使用できます。

<code class="css">@font-face {
  font-family: 'Green Sans Web';
  src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}</code>

このルールは、フォントの 2 つのローカル名「Green Web」と「GreenWeb- Regular」を定義します。フォントを解決するとき、ブラウザはまずこれらのローカル名のいずれかを確認します。一致するものが見つかった場合は、ローカル フォントが使用されます。そうでない場合、ブラウザはフォントのダウンロードに頼ることになります。

これらの手法に従うことで、@font-face ルールでローカル フォントを優先し、不必要なダウンロードを減らし、ユーザー エクスペリエンスを向上させることができます。

以上が不必要なダウンロードを避けるために @font-face ルールでローカル フォントを優先する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。