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 のインストール方法と設定に関するいくつかの問題の概要

推薦する

ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。

現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...

IE8 開発者ツール メニューの説明

<br />この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。こ...

MySQL データベースの鉄則 (要約)

適切なデータベース仕様は、ソフトウェア実装の複雑さを軽減し、通信コストを削減するのに役立ちます。この...

fullpage.js フルスクリーンスクロールの具体的な使い方

1.fullpage.js ダウンロードアドレスhttps://github.com/alvarot...

Linux 占有ポートの強制解放と Linux ファイアウォールのポート開放方法の詳しい説明

nginx、mysql、tomcat などのサービスをインストールするときに、使用する必要があるポー...

explainコマンドがMySQLデータを変更する理由

クエリで EXPLAIN を実行するとデータベースが変更されるかどうかを尋ねられた場合、おそらく「い...

Vue+element ui はアンカーの配置を実現します

この記事では、アンカー配置を実現するためのVue +要素UIの具体的なコードを例として紹介します。具...

ドロップダウンボックス選択コンポーネントを実装するためのネイティブ js

この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考...

Ubuntu 20.04 LTS で Java 開発環境を構成する

Java開発キットjdkをダウンロードするJDK のダウンロード アドレスはhttp://www.o...

デザイン参考 WordPressウェブサイト構築成功事例

これら 16 のサイトはそれぞれ注意深く読む価値があり、どのサイトでも推奨されている Web サイト...

Vue プロジェクトのパッケージ化、マージ、圧縮により、Web ページの応答速度を最適化します。

目次序文1. リクエスト内容が大きすぎる解決: CDN の紹介リクエストリソースを圧縮する1. HT...

JavaScript のよりエレガントなエラー処理方法 async await

目次背景なぜエラー処理が必要なのでしょうか? async await より適切なエラー処理まとめ要約...

CSS3でカルーセル画像を作成する方法

スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...

CentOS7にPHP7 Redis拡張機能をインストールする方法

導入前回の記事では、Redis をインストールして設定しましたが、まだ終わりではありません。PHP ...

HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...