vite plugin webfont dl
v3.10.3
ViteプロジェクトからWebFontリンク、インポート、および定義を収集し、CSSとフォントファイル（プライバシーファースト）をダウンロードし、バンドルにフォントを追加し（またはDEVサーバーを介して提供） 、非レンダーブロッキングメソッドを使用してフォント定義を注入します。
npm i vite-plugin-webfont-dl -D元のGoogleフォントコードスニペットからフォントを抽出、ダウンロード、挿入します。
<head>にコピーします。 < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&family=Roboto:wght@100&display=swap " rel =" stylesheet " >webfontDownload Viteプラグインに追加すると、プラグインが自動的にすべての面倒を見てくれます。 // vite.config.js
import webfontDownload from 'vite-plugin-webfont-dl' ;
export default {
plugins : [
webfontDownload ( ) ,
] ,
} ;dist/index.htmlで置き換えられます： < style > @font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}... </ style > 構成されたWebFont CSS URLからフォントを抽出、ダウンロード、および注入します。
< link href =" [CSS URL] " rel =" stylesheet " >webfontDownloadを追加します。 // vite.config.js
import webfontDownload from 'vite-plugin-webfont-dl' ;
export default {
plugins : [
webfontDownload ( [
'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' ,
'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'
] ) ,
] ,
} ; WebFontsが注入され、使用可能です。
プラグインは、ローカル開発サーバーに取り組んでいるか、生産するために作業しているかにかかわらず、シームレスにジョブを行います。
h1 {
font-family : 'Press Start 2P' , cursive;
}
h2 {
font-family : 'Fira Code' , monospace;
}Laravel Viteプラグインで動作させるには、このラインをブレードファイルに追加します。
@vite ( ' webfonts.css ' )
cdn.jsdelivr.net ）：Zero ConfigまたはSimple Configで動作しますrsms.me ）：Zero ConfigまたはSimple Configで動作します@font-face定義を含む）は、Simple Configで動作しますinjectAsStyleTag （ boolean 、default： true ）：
webfontsを<style>タグ（埋め込みCSS）または外部.cssファイルとして注入します
minifyCss （ boolean 、default： value of build.minify ）：
ビルド中にCSSコードを縮小します。
embedFonts （ boolean 、default： false ）：
base64エンコードフォントをCSSに埋め込みました。
場合によっては、CSSが同じフォントファイルへの複数の参照を含むと、ファイルサイズの増加を引き起こす可能性があります。例
async （ boolean 、default： true ）：
コンテンツセキュリティポリシーの問題を引き起こす可能性のあるインラインイベントハンドラー（ webfonts.css ）の使用を防ぎます。
injectAsStyleTag:false 。
cache （ boolean 、デフォルト： true ）：
ダウンロードしたCSSとフォントファイルをローカルファイルキャッシュに保存します。
falseに設定すると、既存のキャッシュが削除されます。
proxy （ false|AxiosProxyConfig 、デフォルト： false ）：
ネットワークリクエストのプロキシ構成。
assetsSubfolder （ string 、default： '' ）：
ダウンロードされたフォントファイルを移動して、Assetsディレクトリ内のサブフォルダーを分離します。
使用法：
ViteWebfontDownload (
[ ] ,
{
injectAsStyleTag : true ,
minifyCss : true ,
embedFonts : false ,
async : true ,
cache : true ,
proxy : false ,
assetsSubfolder : '' ,
}
)または：
ViteWebfontDownload (
[
'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap' ,
] ,
{
injectAsStyleTag : true ,
minifyCss : true ,
embedFonts : false ,
async : true ,
cache : true ,
proxy : false ,
assetsSubfolder : '' ,
}
)？サードパーティのWebフォントによって引き起こされるレンダリングブロッキングリソースを回避することにより、ページのパフォーマンスを高めることができ、ユーザーの経験が向上し、 SEOの結果が向上します。
プラグインは、サードパーティのWebFontサービス（Googleフォントなど）から指定されたフォントをダウンロードし、 （内部または外部スタイルシートとして）動的にViteプロジェクトに挿入し、サードパーティのWebフォントを自己ホストのWebフォントに変換します。 ？
？大幅なパフォーマンスの向上に加えて、サードパーティサーバーが関与していないため、訪問者もプライバシー保護の恩恵を受けるでしょう。
Googleフォントは、ウェブサイトの<head>に注入する必要がある次のコードを生成します。例：
< link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code&display=swap " rel =" stylesheet " >Googleフォントでクライアント側で何が起こるか：
fonts.googleapis.comを使用して、接続ハンドシェイク（DNS、TCP、TLS）を開始するためのブラウザにヒントを与えます。これは、パフォーマンスを改善するために背景で発生します。 [ preconnect ]fonts.gstatic.comへの別の事前のヒントです。 [ preconnect ]fonts.googleapis.comからCSS StyleSheetファイルをロードして使用するように指示します（ font-display:swap ） 。 [ stylesheet ]fonts.gstatic.comサーバーからのfont URLを含む@font-face定義のセットです。fonts.gstatic.comからすべての関連するフォントをダウンロードし始めます。それどころか、 WebFont-DLプラグインはビルド時にほとんどのジョブを行い、最小値をブラウザに残します。
webfont-dlプラグイン
index.html 、生成されたCSSから）<style>タグ）またはWebFont /外部CSSファイルを生成します<head>に注入します。例： < style >
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/assets/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_GNsJV37Nv7g.9c348768.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
...
</ style >または（DEVサーバーまたはinjectAsStyleTag: falseオプション）
< link rel =" preload " as =" style " href =" /assets/webfonts.b904bd45.css " >
< link rel =" stylesheet " media =" print " onload =" this.onload=null;this.removeAttribute('media'); " href =" /assets/webfonts.b904bd45.css " >WebFont-DLプラグインを使用してクライアント側で何が起こるか：
<style>タグ）からフォントをロードします。または
preload ]print 」スタイルシート（非レンダーブロッキング）としてロードして使用するよう指示します。読み込んだ後、「 all 」メディアタイプのStyleSheetを宣伝します（「 media 」属性を削除することにより）。 [ stylesheet ] スターターViteプロジェクト
| ？ | ||
|---|---|---|
| ？ webfont.feat.agency | ？ webfont-dl.feat.agency |
MITライセンス©2022 Feat。
