快捷導(dǎo)航

在Vue.js中加載字體的正確方法

更新時(shí)間：2021年04月07日 09:37:40 作者：程序員張張

這篇文章主要介紹了在Vue.js中加載字體的正確方法,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

正確聲明 font-face 的字體

確保正確聲明字體是加載字體的重要方面。這是通過(guò)使用 font-face 屬性來(lái)聲明你選擇的字體來(lái)實(shí)現(xiàn)的。在你的 Vue 項(xiàng)目中，這個(gè)聲明可以在你的根 CSS 文件中完成。在進(jìn)入這個(gè)問(wèn)題之前，我們先來(lái)看看 Vue 應(yīng)用的結(jié)構(gòu)。

/root
 public/
 fonts/
 Roboto/
 Roboto-Regular.woff2
 Roboto-Regular.woff
 index.html
 src/
 assets/
 main.css
 components/
 router/
 store/
 views/
 main.js

我們可以像這樣在 main.css 中進(jìn)行 font-face 聲明：

// src/assets/main.css

@font-face {
 font-family: "Roboto";
 font-weight: 400;
 font-style: normal;
 font-display: auto;
 unicode-range: U+000-5FF;
 src: local("Roboto"),
 url("/fonts/Roboto/Roboto-Regular.woff2") format("woff2"),
 url("/fonts/Roboto/Roboto-Regular.woff") format("woff");
}

首先要注意的是 font-display:auto 。使用 auto 作為值可以讓瀏覽器使用最合適的策略來(lái)顯示字體。這取決于一些因素，如網(wǎng)絡(luò)速度、設(shè)備類型、閑置時(shí)間等。

要想更多地控制字體的加載方式，你應(yīng)該使用 font-display: block ，它指示瀏覽器短暫地隱藏文本，直到字體完全下載完畢。其他可能的值有 swap 、 fallback 和 optional 。你可以在這里閱讀更多關(guān)于它們的信息。

需要注意的是 unicode-range: U+000-5FF ，它指示瀏覽器只加載所需的字形范圍（U+000 - U+5FF）。你還想使用 woff 和 woff2 字體格式，它們是經(jīng)過(guò)優(yōu)化的格式，可以在大多數(shù)現(xiàn)代瀏覽器中使用。

另外需要注意的是 src 順序。首先，我們檢查字體的本地副本是否可用( local("Roboto”) )并使用它。很多 Android 設(shè)備都預(yù)裝了 Roboto，在這種情況下，我們將使用預(yù)裝的副本。如果沒有本地副本，則在瀏覽器支持的情況下繼續(xù)下載 woff2 格式。否則，它會(huì)跳至支持的聲明中的下一個(gè)字體。

預(yù)加載字體

一旦你的自定義字體被聲明，你可以使用 <link rel="preload"> 告訴瀏覽器提前預(yù)加載字體。在 public/index.html 中，添加以下內(nèi)容：

<link
 rel="preload"
 as="font"
 href="./fonts/Roboto/Roboto-Regular.woff2"
 type="font/woff2"
 crossorigin="anonymous"
/>

rel = “preload” 指示瀏覽器盡快開始獲取資源， as = “font” 告訴瀏覽器這是一種字體，因此它優(yōu)先處理請(qǐng)求。還要注意 crossorigin=“anonymous" ，因?yàn)槿绻麤]有這個(gè)屬性，預(yù)加載的字體會(huì)被瀏覽器丟棄。這是因?yàn)闉g覽器是以匿名方式獲取字體的，所以使用這個(gè)屬性就可以匿名請(qǐng)求。

使用 link=preload 可以增加自定義字體在需要之前被下載的機(jī)會(huì)。這個(gè)小調(diào)整大大加快了字體的加載時(shí)間，從而加快了您的 Web 應(yīng)用程序中的文本渲染。

使用 link = preconnect 托管字體

當(dāng)使用Google fonts 等網(wǎng)站的托管字體時(shí)，你可以通過(guò)使用 link=preconnect 來(lái)獲得更快的加載時(shí)間。它告訴瀏覽器提前建立與域名的連接。

如果您使用的是 Google 字體提供的 Roboto 字體，則可以在 public/index.html 中執(zhí)行以下操作：

<link rel="preconnect"  />
...
<link
 
 rel="stylesheet"
/>

這樣就可以建立與原點(diǎn) https://fonts.gstatic.com 的初始連接，當(dāng)瀏覽器需要從原點(diǎn)獲取資源時(shí)，連接已經(jīng)建立。從下圖中可以看出兩者的區(qū)別。

當(dāng)加載字體時(shí)沒有使用 link=preconnect 時(shí)，你可以看到連接所需的時(shí)間（DNS 查找、初始連接、SSL 等）。當(dāng)像這樣使用 link=preconnect 時(shí)，結(jié)果看起來(lái)非常不同。

在這里，你會(huì)發(fā)現(xiàn) DNS 查找、初始連接和 SSL 所花費(fèi)的時(shí)間已經(jīng)不存在了，因?yàn)榍懊嬉呀?jīng)進(jìn)行了連接。

使用 service workers 緩存字體

字體是靜態(tài)資源，變化不大，所以它們是緩存的好候選。理想情況下，您的 Web 服務(wù)器應(yīng)該為字體設(shè)置一個(gè)較長(zhǎng)的 max-age expires 頭，這樣瀏覽器緩存字體的時(shí)間就會(huì)更長(zhǎng)。如果你正在構(gòu)建一個(gè)漸進(jìn)式網(wǎng)絡(luò)應(yīng)用（PWA），那么你可以使用 service workers 來(lái)緩存字體，并直接從緩存中為它們提供服務(wù)。

要開始使用 Vue 構(gòu)建 PWA，請(qǐng)使用 vue-cli 工具生成一個(gè)新項(xiàng)目：

vue create pwa-app

選擇 Manually select features 選項(xiàng)，然后選擇 Progressive Web App (PWA) Support ：

這些就是我們生成 PWA 模板所需要的唯一東西。完成后，你就可以把目錄改為 pwa-app ，然后為 app 服務(wù)。

cd pwa-app
yarn serve

你會(huì)注意到在 src 目錄下有一個(gè)文件 registerServiceWorker ，其中包含了默認(rèn)的配置。在項(xiàng)目的根目錄下，如果 vue.config.js 不存在，請(qǐng)創(chuàng)建它，如果存在，請(qǐng)?zhí)砑右韵聝?nèi)容：

// vue.config.js
module.exports = {
 pwa: {
 workboxOptions: {
 skipWaiting: true,
 clientsClaim: true,
 },
 },
};

vue-cli 工具使用PWA plugin 生成 service worker。在底層，它使用 Workbox 來(lái)配置 service worker 和它控制的元素、要使用的緩存策略以及其他必要的配置。

在上面的代碼片段中，我們要確保我們的應(yīng)用程序始終由 service worker 的最新版本控制。這是必要的，因?yàn)樗_保我們的用戶總是查看應(yīng)用程序的最新版本。您可以簽出 Workbox 配置文檔，以獲得對(duì)生成的 service worker 行為的更多控制。

接下來(lái)，我們將自定義字體添加到 public 目錄。我有以下結(jié)構(gòu)：

root/
 public/
 index.html
 fonts/
 Roboto/
 Roboto-Regular.woff
 Roboto-Regular.woff2

一旦完成了 Vue 應(yīng)用程序的開發(fā)，就可以通過(guò)從終端運(yùn)行以下命令來(lái)構(gòu)建它：

yarn build

這將結(jié)果輸出到 dist 文件夾中。如果你檢查文件夾的內(nèi)容，你會(huì)注意到一個(gè)類似于 precache-manifest.1234567890.js 的文件。它包含了要緩存的資產(chǎn)列表，這只是一個(gè)包含修訂版和 URL 的鍵值對(duì)的列表。

self.__precacheManifest = (self.__precacheManifest || []).concat([
 {
 "revision": "3628b4ee5b153071e725",
 "url": "/fonts/Roboto/Roboto-Regular.woff2"
 },
 ...
]);

public/ 文件夾中的所有內(nèi)容都是默認(rèn)緩存的，其中包括自定義字體。有了這個(gè)地方，你可以用像 service 這樣的包來(lái) serve 你的應(yīng)用程序，或者把 dist 文件夾托管在 web 服務(wù)器上查看結(jié)果。你可以在下面找到一個(gè)應(yīng)用程序的截圖。