vite plugin webfont dl下載vite plugin webfont dl源代碼下載

vite plugin webfont dl

字體下載

v3.10.3

下載

？ WebFont Dowload Vite插件⚡

Collects webfont links, imports and definitions from your Vite project, downloads css and font files (privacy-first) , add the fonts to your bundle (or serves through dev server) , and injects font definitions using a non-render blocking method , meanwhile stores external css and font files in a persistent file cache , making them available for offline development.

？安裝

npm i vite-plugin-webfont-dl -D

？用法：零配置_^[方法A]

從原始的Google字體代碼段中提取，下載和注入字體。

在WebFont提供商（例如Google字體）中選擇您的字體系列，然後將代碼<head>到“ Web上的使用”塊中：

 < 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 ( ) ,
  ] ,
} ;

原始的WebFont標籤將在dist/index.html中替換：

 < style > @font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}... </ style >

？用法：簡單配置_^[方法B]

從配置的WebFont CSS URL（S）提取，下載和注入字體。

在您的WebFont提供商（例如Google字體）中選擇您的字體系列，然後從“在Web上使用”代碼塊中復制CSS URL ：
```
 < link href =" [CSS URL] " rel =" stylesheet " >
```

使用選定的Google字體CSS URL添加webfontDownload到您的Vite插件：

 // 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'
    ] ) ,
  ] ,
} ;

就這樣！

webfont被注入並準備使用。
無論您是在本地開發服務器上工作還是生產構建，該插件都可以無縫地完成工作。

 h1 {
  font-family : 'Press Start 2P' , cursive;
}

h2 {
  font-family : 'Fira Code' , monospace;
}

？拉拉維爾

為了使其與Laravel Vite插件一起使用，將此行添加到您的刀片文件中：

 @vite ( ' webfonts.css ' )

？螢幕截圖

？支持的WebFont提供商

Google字體：使用零配置或簡單配置
兔子字體：使用零配置或簡單配置
fontshare ：使用零配置或簡單配置
FIRA代碼，黑客字體（ cdn.jsdelivr.net ）：與零配置或簡單配置一起使用
INTER FONT（ rsms.me ）：與零配置或簡單配置一起使用
任何具有CSS（包含@font-face定義）的提供商可用於簡單配置

選項

injectAsStyleTag （ boolean ，默認值： true ）：
注入webfonts作為<style> tag（嵌入式CSS）或外部.css文件
minifyCss （ boolean ，默認值： build.minify值。Minify）：
在構建過程中縮小CSS代碼。
embedFonts （ boolean ，默認： false ）：
嵌入基本64編碼的字體中的CSS。
在某些情況下，如果CSS包含對同一字體文件的多個引用，則可能導致文件大小。例子
async （ boolean ，默認值： true ）：
防止使用可能導致內容安全策略問題的內聯事件處理程序（ webfonts.css ）。
僅適用於injectAsStyleTag:false 。
cache （ boolean ，默認值： true ）：
在本地文件緩存中持續存儲下載的CSS和字體文件。
如果設置為false則將刪除現有緩存。
proxy （ false|AxiosProxyConfig ，默認值： false ）：
網絡請求的代理配置。
assetsSubfolder （ string ，默認值： '' ）：
將下載的字體文件移動到資產目錄中的子文件夾。

用法：

 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 : '' ,
  }
)

❓第三方WebFonts

配x使用標準方法添加第三方WebFonts（Google字體，兔子字體或字體共享）到網頁上可以大大減慢頁面加載。 Lighthouse和PagesPeed Insights稱它們為“渲染障礙資源” ，這意味著該頁面無法完全呈現，直到WebFonts CSS才從遠程服務器中獲取。

？通過避免由第三方WebFonts引起的渲染障礙資源，您可以提高頁面性能，從而可以提高用戶體驗，從而改善SEO結果。

該插件從第三方WebFont服務（如Google字體）下載給定字體，並將其動態注入您的Vite項目（作為內部或外部樣式表） ，將第三方WebFonts轉換為自託管的項目。？

？除了大幅提高性能外，您的訪問者還將受益於隱私保護，因為不涉及第三方服務器。

？它如何工作

？ Google字體

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 ]
瀏覽器下載CSS文件並開始解析它。解析的CSS是一組@font-face定義，其中包含來自fonts.gstatic.com服務器的字體URL。
瀏覽器開始從fonts.gstatic.com下載所有相關字體。
成功的字體下載後，瀏覽器將後備字體交換為已下載的字體。

？

？ WebFont-DL Vite插件

相反， WebFont-DL插件在構建時間完成了大部分工作，將最小值留給了瀏覽器。

WebFont-DL插件

收集WebFont CSS URL（來自插件config， index.html和生成的CSS）
下載WebFont CSS文件
提取字體URL
下載字體
將字體添加到捆綁包中
生成嵌入式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 >

或（使用開發服務器或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插件在客戶端上會發生什麼：

從嵌入式CSS（ <style>標籤）加載字體。

或者

第一行指示瀏覽器將CSS文件預取以後用作樣式表。 [ preload ]
第二行指示瀏覽器加載並使用CSS文件作為“ print ”樣式表（非渲染阻止） 。加載後，它促進“ all ”媒體類型樣式表（通過刪除“ media ”屬性）。 [ stylesheet ]