小编给大家分享一下在Vue。js中如何加载字体,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
添加字体不应该对性能产生负面影响。在本文中,我们将探讨在Vue应用程序中加载字体的最佳实践。
正确声明字体的字体
确保正确声明字体是加载字体的重要方面。这是通过使用字体属性来声明你选择的字体来实现的。在你的Vue项目中,这个声明可以在你的根CSS文件中完成。在进入这个问题之前,我们先来看看Vue应用的结构。
我们可以像这样在主要。css中进行字体声明:
首先要注意的是font-display:汽车。使用汽车作为值可以让浏览器使用最合适的策略来显示字体。这取决于一些因素,如网络速度,设备类型,闲置时间等。
要想更多地控制字体的加载方式,你应该使用font-display:块,它指示浏览器短暂地隐藏文本,直到字体完全下载完毕。其他可能的值有交换,回退和可选的。你可以在这里阅读更多关于它们的信息。
需要注意的是unicode-range: U + 000 - 5 - ff,它指示浏览器只加载所需的字形范围(U + 000 - U + 5 ff)。你还想使用woff和woff2字体格式,它们是经过优化的格式,可以在大多数现代浏览器中使用。
另外需要注意的是src顺序。首先,我们检查字体的本地副本是否可用(本地(“Roboto”)并使用它。很多Android设备都预装了Roboto,在这种情况下,我们将使用预装的副本。如果没有本地副本,则在浏览器支持的情况下继续下载woff2格式。否,则它会跳至支持的声明中的下一个字体。
预加载字体
一旦你的自定义字体被声明,你可以使用& lt;链接rel=皃reload"比;告诉浏览器提前预加载字体。在公共/索引。html中添加以下内容:
rel=霸ぁ敝甘句榔骶】炜蓟袢∽试?作为=白痔濉备嫠咪榔髡馐且恢肿痔?因此它优先处理请求。还要注意crossorigin=" anonymous",因为如果没有这个属性,预加载的字体会被浏览器丢弃。这是因为浏览器是以匿名方式获取字体的,所以使用这个属性就可以匿名请求。
使用链接=预加载可以增加自定义字体在需要之前被下载的机会。这个小调整大大加快了字体的加载时间,从而加快了您的网页应用程序中的文本渲染。
使用链接=preconnect托管字体
当使用谷歌字体等网站的托管字体时,你可以通过使用链接=preconnect来获得更快的加载时间。它告诉浏览器提前建立与域名的连接。
如果您使用的是谷歌字体提供的Roboto字体,则可以在公共/索引。html中执行以下操作:
这样就可以建立与原点https://fonts.gstatic.com的初始连接,当浏览器需要从原点获取资源时,连接已经建立。从下图中可以看出两者的区别。
当加载字体时没有使用链接=preconnect时,你可以看到连接所需的时间(DNS查找,初始连接,SSL等)。当像这样使用链接=preconnect时,结果看起来非常不同。
在这里,你会发现DNS查找,初始连接和SSL所花费的时间已经不存在了,因为前面已经进行了连接。
