在Vue.js中加载字体的优秀做法

首先要注意的是 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格式。否则，它会跳至支持的声明中的下一个字体。

预加载字体

一旦你的自定义字体被声明，你可以 “preload” 指示浏览器尽快开始获取资源，as = “font” 告诉浏览器这是一种字体，因此它优先处理请求。还要注意 crossorigin="anonymous"，因为如果没有这个属性，预加载的字体会被浏览器丢弃。这是因为浏览器是以匿名方式获取字体的，所以使用这个属性就可以匿名请求。

使用 link=preload 可以增加自定义字体在需要之前被下载的机会。这个小调整大大加快了字体的加载时间，从而加快了您的Web应用程序中的文本渲染。

使用link = preconnect托管字体

当使用Google fonts等网站的托管字体时，你可以通过使用 link=preconnect 来获得更快的加载时间。它告诉浏览器提前建立与域名的连接。

如果您使用的是Google字体提供的Roboto字体，则可以在 public/index.html 中执行以下操作：体是静态资源，变化不大，所以它们是缓存的好候选。理想情况下，您的Web服务器应该为字体设置一个较长的 max-age expires 头，这样浏览器缓存字体的时间就会更长。如果你正在构建一个渐进式网络应用(PWA)，那么你可以使用service workers来缓存字体，并直接从缓存中为它们提供服务。

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!