Vue.js でフォントを読み込む正しい方法

font-faceでフォントを正しく宣言する

フォントが正しく宣言されていることを確認することは、フォントを読み込む際の重要な側面です。これは、font-face プロパティを使用して選択したフォントを宣言することによって行われます。 Vue プロジェクトでは、この宣言はルート CSS ファイルで行うことができます。この質問に入る前に、Vue アプリケーションの構造を見てみましょう。

/根
 公共/
 フォント/
 ロボト/
 Roboto-Regular.woff2
 Roboto-Regular.woff
 インデックス.html
 ソース/
 資産/
 メイン.css
 コンポーネント/
 ルーター/
 店/
 ビュー/
 メイン.js

main.css で font-face を次のように宣言することでこれを実行できます。

// src/assets/main.css

@フォントフェイス {
 フォントファミリー: "Roboto";
 フォントの太さ: 400;
 フォントスタイル: 通常;
 フォント表示: 自動;
 ユニコード範囲: U+000-5FF;
 src: ローカル("Roboto"),
 url("/fonts/Roboto/Roboto-Regular.woff2") フォーマット("woff2"),
 url("/fonts/Roboto/Roboto-Regular.woff") フォーマット("woff");
}

最初に注目すべきは font-display:auto です。値として auto を使用すると、ブラウザはフォントを表示するために最も適切な戦略を使用します。これは、ネットワーク速度、デバイスの種類、アイドル時間などの要因によって異なります。

フォントの読み込み方法をより細かく制御するには、 font-display: block を使用する必要があります。これは、フォントが完全にダウンロードされるまでブラウザにテキストを一時的に非表示にするように指示します。その他の可能な値は swap、fallback、optional です。詳細については、こちらをご覧ください。

unicode-range: U+000-5FF に注意してください。これは、ブラウザに必要なグリフ範囲 (U+000 - U+5FF) のみを読み込むように指示します。また、ほとんどの最新ブラウザで動作するように最適化された形式である woff および woff2 フォント形式も使用する必要があります。

もう一つ注意すべき点は src の順序です。まず、フォントのローカルコピーが使用可能かどうか ( local("Roboto") ) を確認し、それを使用します。多くの Android デバイスには Roboto がプリインストールされており、この場合はプリインストールされたコピーを使用します。ローカルコピーがない場合は、ブラウザーが woff2 形式をサポートしていれば、そのダウンロードを続行します。それ以外の場合は、サポートされている宣言内の次のフォントにスキップします。

フォントをプリロードする

カスタムフォントを宣言したら、<link rel="preload"> を使用して、ブラウザに事前にフォントをプリロードするように指示できます。 public/index.html に以下を追加します。

<リンク
 rel="プリロード"
 as="フォント"
 href="./fonts/Roboto/Roboto-Regular.woff2"
 タイプ="font/woff2"
 クロスオリジン="匿名"
/>

rel="preload" はブラウザにできるだけ早くリソースの取得を開始するように指示し、as="font" はブラウザにこれがフォントであることを伝えてリクエストを優先します。また、crossorigin="anonymous" にも注意してください。この属性がないと、プリロードされたフォントはブラウザによって破棄されます。これは、ブラウザがフォントを匿名で取得するため、この属性を使用すると匿名のリクエストを行うことができるためです。

link=preload を使用すると、カスタムフォントが必要になる前にダウンロードされる可能性が高まります。この小さな調整により、フォントの読み込み時間が大幅に短縮され、Web アプリケーションでのテキストのレンダリングが高速化されます。

フォントをホストするにはlink=preconnectを使用します

Google Fonts などのサイトからホストされているフォントを使用する場合、link=preconnect を使用すると読み込み時間が短縮されます。ブラウザにドメイン名への接続を事前に確立するように指示します。

Google Fonts が提供する Roboto フォントを使用している場合は、public/index.html で次の操作を実行できます。

<link rel="preconnect" href="https://fonts.gstatic.com" />
...
<リンク
 href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
 rel="スタイルシート"
/>

これにより、オリジン https://fonts.gstatic.com への初期接続が確立され、ブラウザーがオリジンからリソースを取得する必要があるときには、接続がすでに確立されています。両者の違いは以下の図で確認できます。

link=preconnect なしでフォントをロードすると、接続にかかる時間 (DNS ルックアップ、初期接続、SSL など) を確認できます。このように link=preconnect を使用すると、結果が大きく異なって見えます。

ここでは、接続がすでに確立されているため、DNS ルックアップ、初期接続、SSL にかかる時間がなくなっていることに気付くでしょう。

サービスワーカーを使用してフォントをキャッシュする

フォントはあまり変化しない静的リソースなので、キャッシュに適しています。理想的には、ブラウザがフォントをより長くキャッシュできるように、Web サーバーはフォントの max-age expires ヘッダーをより長く設定する必要があります。プログレッシブウェブアプリ (PWA) を構築する場合は、サービスワーカーを使用してフォントをキャッシュし、キャッシュから直接提供することができます。

Vue を使用して PWA の構築を開始するには、vue-cli ツールを使用して新しいプロジェクトを生成します。

vue で pwa アプリを作成する

[手動で機能を選択する] オプションを選択し、[プログレッシブ Web アプリ (PWA) サポート] を選択します。

PWA テンプレートを生成するために必要なのはこれだけです。完了したら、ディレクトリを pwa-app に変更してアプリを提供できます。

cd pwa アプリ
糸サーブ

src ディレクトリに、デフォルトの構成を含む registerServiceWorker ファイルがあることがわかります。プロジェクトのルートディレクトリに vue.config.js が存在しない場合は作成し、存在する場合は次のコンテンツを追加します。

// vue.config.js
モジュール.エクスポート = {
 質問:
 ワークボックスオプション: {
 スキップ待機: true、
 クライアントの主張: true、
 },
 },
};

vue-cli ツールは PWA プラグインを使用してサービスワーカーを生成します。内部的には、Workbox を使用して、サービスワーカーとそれが制御する要素、使用するキャッシュ戦略、およびその他の必要な構成を構成します。

上記のコードスニペットでは、アプリケーションが常に最新バージョンのサービスワーカーによって制御されるようにしています。これは、ユーザーが常に最新バージョンのアプリケーションを表示できるようにするため必要です。生成されたサービスワーカーの動作をさらに制御するには、Workbox 構成ドキュメントを確認してください。

次に、カスタムフォントをパブリックディレクトリに追加します。次のような構造になっています。

根/
 公共/
 インデックス.html
 フォント/
 ロボト/
 Roboto-Regular.woff
 Roboto-Regular.woff2

Vue アプリケーションの開発が完了したら、ターミナルから次のコマンドを実行してビルドできます。

糸ビルド

これにより、結果が dist フォルダーに出力されます。フォルダーの内容を調べると、precache-manifest.1234567890.js のようなファイルがあることがわかります。キャッシュするアセットのリストが含まれています。これは、リビジョンと URL を含むキーと値のペアのリストにすぎません。

self.__precacheManifest = (self.__precacheManifest || []).concat([
 {
 「リビジョン」: 「3628b4ee5b153071e725」、
 "url": "/fonts/Roboto/Roboto-Regular.woff2"
 },
 ...
]);

カスタムフォントを含め、public/ フォルダ内のすべてがデフォルトでキャッシュされます。これを設定すると、service などのパッケージを使用してアプリケーションを提供したり、Web サーバー上で dist フォルダーをホストして結果を表示したりできるようになります。以下にアプリケーションのスクリーンショットを示します。

次回のアクセス時には、フォントがキャッシュから読み込まれるため、アプリケーションの読み込み時間が短縮されます。

結論は

この記事では、Vue アプリケーションでフォントを読み込むときに適用するベストプラクティスをいくつか紹介しました。これらの方法を使用すると、アプリのパフォーマンスに影響を与えることなく、提供するフォントの見栄えが良くなります。

Vue.js でフォントを読み込む正しい方法についての記事はこれで終わりです。vue.js フォント読み込みに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: