关于前端:在Vuejs中加载字体的最佳做法

博客原文：https://blog.zhangbing.site/2021/04/07/best-practices-for-loading-fonts-in-vue/

增加字体不应该对性能产生负面影响。在本文中，咱们将探讨在 Vue 应用程序中加载字体的最佳实际。

正确申明 font-face 的字体

确保正确申明字体是加载字体的重要方面。这是通过应用 font-face 属性来申明你抉择的字体来实现的。在你的 Vue 我的项目中，这个申明能够在你的根 CSS 文件中实现。在进入这个问题之前，咱们先来看看 Vue 利用的构造。

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

咱们能够像这样在 main.css 中进行 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 作为值能够让浏览器应用最合适的策略来显示字体。这取决于一些因素，如网络速度、设施类型、闲置工夫等。

要想更多地管制字体的加载形式，你应该应用 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 中，增加以下内容：

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

rel =“preload” 批示浏览器尽快开始获取资源，as =“font” 通知浏览器这是一种字体，因而它优先解决申请。还要留神crossorigin=“anonymous"，因为如果没有这个属性，预加载的字体会被浏览器抛弃。这是因为浏览器是以匿名形式获取字体的，所以应用这个属性就能够匿名申请。

应用 link=preload 能够减少自定义字体在须要之前被下载的机会。这个小调整大大放慢了字体的加载工夫，从而放慢了您的 Web 应用程序中的文本渲染。

应用 link = preconnect 托管字体

当应用 Google fonts 等网站的托管字体时，你能够通过应用 link=preconnect 来取得更快的加载工夫。它通知浏览器提前建设与域名的连贯。

如果您应用的是 Google 字体提供的 Roboto 字体，则能够在 public/index.html 中执行以下操作：

<link rel="preconnect" href="https://fonts.gstatic.com">
...
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

这样就能够建设与原点 https://fonts.gstatic.com 的初始连贯，当浏览器须要从原点获取资源时，连贯曾经建设。从下图中能够看出两者的区别。

当加载字体时没有应用 link=preconnect 时，你能够看到连贯所需的工夫（DNS 查找、初始连贯、SSL 等）。当像这样应用link=preconnect 时，后果看起来十分不同。

在这里，你会发现 DNS 查找、初始连贯和 SSL 所破费的工夫曾经不存在了，因为后面曾经进行了连贯。

应用 service workers 缓存字体

字体是动态资源，变动不大，所以它们是缓存的好候选。现实状况下，您的 Web 服务器应该为字体设置一个较长的 max-age expires 头，这样浏览器缓存字体的工夫就会更长。如果你正在构建一个渐进式网络应用（PWA），那么你能够应用 service workers 来缓存字体，并间接从缓存中为它们提供服务。

要开始应用 Vue 构建 PWA，请应用 vue-cli 工具生成一个新我的项目：

vue create pwa-app

抉择 Manually select features 选项，而后抉择Progressive Web App (PWA) Support：

这些就是咱们生成 PWA 模板所须要的惟一货色。实现后，你就能够把目录改为 pwa-app，而后为 app 服务。

cd pwa-app
yarn serve

你会留神到在 src 目录下有一个文件 registerServiceWorker，其中蕴含了默认的配置。在我的项目的根目录下，如果vue.config.js 不存在，请创立它，如果存在，请增加以下内容：

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

vue-cli 工具应用 PWA plugin 生成 service worker。在底层，它应用 Workbox 来配置 service worker 和它管制的元素、要应用的缓存策略以及其余必要的配置。

在下面的代码片段中，咱们要确保咱们的应用程序始终由 service worker 的最新版本控制。这是必要的，因为它确保咱们的用户总是查看应用程序的最新版本。您能够签出 Workbox 配置文档，以取得对生成的 service worker 行为的更多管制。

接下来，咱们将自定义字体增加到 public 目录。我有以下构造：

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

一旦实现了 Vue 应用程序的开发，就能够通过从终端运行以下命令来构建它：

yarn build

这将后果输入到 dist 文件夹中。如果你查看文件夹的内容，你会留神到一个相似于 precache-manifest.1234567890.js 的文件。它蕴含了要缓存的资产列表，这只是一个蕴含修订版和 URL 的键值对的列表。

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

public/ 文件夹中的所有内容都是默认缓存的，其中包含自定义字体。有了这个中央，你能够用像 service 这样的包来 serve 你的应用程序，或者把 dist 文件夹托管在 web 服务器上查看后果。你能够在上面找到一个应用程序的截图。

在随后的拜访中，字体是从缓存中加载的，这能够放慢应用程序的加载工夫。

论断

在这篇文章中，咱们钻研了在 Vue 应用程序中加载字体时利用的一些最佳实际。应用这些实际将确保你提供的字体看起来不错，而不影响利用的性能。