确保正确声明字体是加载字体的重要方面。这是通过利用 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> 汇报欣赏器提前预加载字体。在 public/index.html 中，添加以下内容：
<link as="font" href="https://www.jb51.net/article/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 href="https://fonts.gstatic.com" /> ... <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" />
这样就可以成立与原点 https://fonts.gstatic.com 的初始毗连，当欣赏器需要从原点获取资源时，毗连已经成立。从下图中可以看出两者的区别。
当加载字体时没有利用 link=preconnect 时，你可以看到毗连所需的时间（DNS 查找、初始毗连、SSL 等）。当像这样利用 link=preconnect 时，功效看起来很是差异。
在这里，你会发明 DNS 查找、初始毗连和 SSL 所耗费的时间已经不存在了，因为前面已经举办了毗连。
字体是静态资源，变革不大，所以它们是缓存的好候选。抱负环境下，您的 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