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

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

フォントを追加してもパフォーマンスに悪影響はありません。この記事では、Vue アプリケーションでフォントを読み込むためのベスト プラクティスについて説明します。

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js iview をパッケージ化して起動した後にフォントアイコンが表示されない問題の解決方法
  • Vue プロジェクトにフォント .ttf を導入する方法
  • Vue のサードパーティ フォント アイコンに Font Awesome を導入する方法
  • Vueプロジェクト導入時のフォントアイコンエラーや非表示の問題を解決

<<:  Docker を使用して Django プロジェクトをデプロイする方法の例

>>:  MySQL のインストール方法と設定に関するいくつかの問題の概要

推薦する

MySQL トリガーの追加、削除、変更、クエリ操作の例

この記事では、例を使用して、MySQL トリガーの追加、削除、変更、およびクエリ操作について説明しま...

Dockerのyumソースの設定とCentOS7へのインストールの詳細な説明

ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...

vue cli で env を使用するガイド

目次序文紹介-公式設定例序文vueCli を使用してプロジェクトを開発したことのある方は、少しがっか...

Vue+echarts でプログレスバーのヒストグラムを実現

この記事では、プログレスバーヒストグラムを実現するためのvue+echartsの具体的なコードを参考...

Linux環境でのActiveMQ導入方法の詳しい説明

この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...

Linux で libudev を使用して USB デバイスの VID と PID を取得する方法

この記事では、libudev ライブラリを使用して hidraw デバイスにアクセスします。 lib...

JS を使用して航空機戦争の小さなゲームを実装する

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...

Vueのトランジションとアニメーションの深い理解

1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。...

JS で配列の重複排除を実装する 7 つの方法

目次1. Set()+Array.from() を使用する2. 2層ループ+アレイ接合方式の使用3....

Nginx ログのカスタマイズとログ バッファの有効化の詳細な説明

序文ウェブサイトのアクセス元をカウントしたい場合は、PHP を使用して情報を取得してデータベースに記...

Dockerコンテナのネットワーク管理とネットワーク分離の実装

1. Dockerネットワーク管理1. Dockerコンテナ方式1) Dockerが外部ネットワーク...

Vue-cli を使用して Vue プロジェクトを構築する手順の詳細な説明

まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...

MySQL InnoDBとMyISAMの違いを簡単に理解する

序文MySQL は、myisam、innodb、memory、archive、example など、...

フロントエンドJSサンドボックスを実装するいくつかの方法についての簡単な説明

目次序文iframeはサンドボックスを実装しますdiffメソッドを使用したサンドボックスの実装プロキ...

JSの矢印関数におけるこのポイントの詳細な説明

矢印関数は ES6 の新機能です。独自の this はありません。その this ポイントは外部のコ...