添加字体不应该对性能产生负面影响。在本文中，我们将探讨在Vue应用程序中加载字体的良好做法。正确声明字体确保正确声明字体是加载字体的一个重要方面。这是通过使用font-face属性声明您选择的字体来实现的。在你的Vue项目中，这个声明可以在你的根CSS文件中完成。在进入这个问题之前，让我们看一下Vue应用程序的结构。/rootpublic/fonts/Roboto/Roboto-Regular.woff2Roboto-Regular.woffindex.htmlsrc/assets/main.csscomponents/router/store/views/我们可以像这样在main.css中声明字体：//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格式。否则，它会跳到支持的声明中的下一个字体。预加载字体一旦声明了自定义字体，您就可以使用它告诉浏览器提前预加载字体。在public/index.html中，添加以下内容：rel="preload"指示浏览器尽快开始获取资源，而as="font"告诉浏览器这是一种字体，因此它会优先处理请求。还要注意crossorigin="anonymous"因为没有这个属性预加载的字体会被浏览器丢弃。这是因为浏览器是匿名获取字体的，所以使用这个属性可以进行匿名请求。使用link=preload增加了自定义字体在需要之前被下载的机会。这个小调整大大加快了字体的加载时间，从而加快了Web应用程序中的文本呈现速度。使用link=preconnect托管字体当使用来自GoogleFonts等网站的托管字体时，您可以通过使用link=preconnect获得更快的加载时间。它告诉浏览器提前建立与域名的连接。如果您使用GoogleFonts提供的Roboto字体，您可以在public/index.html中执行此操作：...当浏览器需要时，这将建立与源https://fonts.gstatic.com的初始连接startfrom当origin获取资源时，连接已经建立。从下图可以看出两者的区别。在没有link=preconnect的情况下加载字体时，您可以看到连接需要多长时间（DNS查找、初始连接、SSL等）。当像这样使用link=preconnect时，结果看起来非常不同。在这里，您会发现花在DNS查找、初始连接和SSL上的时间都没有了，因为已经建立了连接。使用ServiceWorker缓存字体字体是静态资源，不会发生太大变化，因此它们是缓存的理想选择。理想情况下，您的Web服务器应该为字体设置一个较长的max-ageexpires标头，以便浏览器缓存字体更长时间。如果您正在构建渐进式Web应用程序(PWA)，则可以使用服务工作者来缓存字体并直接从缓存中提供它们。要开始使用Vue构建PWA，请使用vue-cli工具生成一个新项目：vuecreatepwa-app选择手动选择功能选项，然后选择渐进式Web应用程序(PWA)支持：这些是我们生成PWA模板所需的唯一内容.完成后，您可以将目录更改为pwa-app并提供该应用程序。cdpwa-appyarnserve你会注意到在src目录下有一个文件registerServiceWorker，里面包含了默认的配置。在项目的根目录下，如果vue.config.js不存在则创建它，如果存在则添加以下内容：//vue.config.jsmodule.exports={pwa:{workboxOptions:{skipWaiting:true,clientsClaim:true,}}}vue-cli工具使用PWA插件生成服务工作者。在底层，它使用Workbox来配置serviceworker及其控制的元素、要使用的缓存策略以及其他必要的配置。在上面的代码片段中，我们希望确保我们的应用程序始终由最新版本的serviceworker控制。这是必要的，因为它确保我们的用户始终查看最新版本的应用程序。您可以查看Workbox配置文档，以更好地控制生成的服务工作者的行为。接下来，我们将自定义字体添加到公共目录。我有以下结构：root/public/index.htmlfonts/Roboto/Roboto-Regular.woffRoboto-Regular.woff2完成Vue应用程序的开发后，您可以通过从终端运行以下命令来构建它：yarnbuild这将将结果输出到dist文件夹。如果您检查文件夹的内容，您会注意到一个类似于precache-manifest.1234567890.js的文件。它包含要缓存的资产列表，这只是包含修订和URL的键值对列表。self.__precacheManifest=(self.__precacheManifest||[]).concat([{"revision":"3628b4ee5b153071e725","url":"/fonts/Roboto/Roboto-Regular.woff2"},...]);public/文件夹中的所有内容都默认缓存，包括自定义字体。有了这个，您可以使用类似服务的包来为您的应用程序提供服务，或者在Web服务器上托管dist文件夹以查看结果。您可以在下面找到该应用程序的屏幕截图。在随后的访问中，字体从缓存中加载，这可以加快应用程序加载时间。结论在这篇文章中，我们研究了在Vue应用程序中加载字体时应用的一些最佳实践。使用这些做法将确保您提供的字体看起来不错，而不会影响应用程序的性能。
