Nuxt.js に Google フォントを効率的にロードするにはどうすればよいですか?
Nov 02, 2024 am 03:53 AMNuxt に Google フォントを効率的にロードする最良の方法
同じ Google フォントから異なるフォントのウェイトを必要とする複数のコンポーネントを操作する場合、 Layout.vue で複数のリンクをインポートするという冗長な行為を避けることが重要です。
この問題に対処し、NuxtJS プロジェクトでのフォントの読み込みを最適化するには、@nuxtjs/google-fonts モジュールを利用することをお勧めします。このモジュールは、Google フォントのインポートを管理するための効率的かつ一元的なアプローチを提供します。
@nuxtjs/google-fonts モジュールの使用
- モジュールをインストールします:
npm install @nuxtjs/google-fonts
ログイン後にコピー
- モジュールを nuxt.config.js ファイルに追加します。
export default { buildModules: [ [ '@nuxtjs/google-fonts', { families: { 'Saira Semi Condensed': { wght: [600, 800], }, }, display: 'swap', // Load fonts as soon as possible prefetch: false, // Don't prefetch fonts preconnect: false, // Don't preconnect to font server preload: false, // Don't preload fonts download: true, // Download fonts for offline use base64: false, // Don't base64 encode fonts }, ], ], }
ログイン後にコピー
- @font を使用してコンポーネント スタイルにフォントをインポートします。 -face ルール:
@font-face { font-family: 'Saira Semi Condensed', sans-serif; font-weight: 600; font-style: normal; src: local('Saira Semi Condensed'), local('SairaSemiCondensed-Wght600'), url("https://fonts.gstatic.com/s/sairasemicondensed/v15/E6qS90ZBdhyxr0K917oteYGc.woff2") format('woff2'); }
ログイン後にコピー
追加メモ:
- 特定のフォント ウェイトがダウンロードされない場合は、モジュールで overwriting: true を設定します。構成するか、パッケージを v3.0.0-1 に更新します。
- パフォーマンスの最適化には、CDN を使用するよりもセルフホスティング Google Fonts を使用することをお勧めします。セルフホスティングには google-webfonts-helper の使用を検討してください。
以上がNuxt.js に Google フォントを効率的にロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7133
9


Java チュートリアル
1534
14


Laravel チュートリアル
1256
25


PHP チュートリアル
1205
29


CakePHP チュートリアル
1153
46



Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する

node.jsとexpressのMulterを使用してファイルアップロードします

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する
