vue设置字体,vue 加载js
摘要：本文主要介绍了在Vue.js中加载字体的正确方法。本文通过实例和图片相结合的方式为您详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
目录
正确声明font-face的字体。通过link=preconnect预加载字体通过服务人员预连接托管字体和缓存字体。结论添加字体应该不会对性能产生负面影响。在本文中，我们将探索在Vue应用程序中加载字体的最佳实践。
正确声明 font-face 的字体
确保字体声明正确是加载字体的一个重要方面。这是通过使用font-face属性声明您选择的字体来实现的。在你的Vue项目中，这个语句可以在你的根CSS文件中完成。在进入这个问题之前，我们先来看看Vue应用的结构。
/root
公共/
字体/
机器人/
Roboto-Regular.woff2
Roboto-Regular.woff
index.html
src/
资产/
main.css
组件/
路由器/
商店/
观点/
主页. js
我们可以像这样在main.css中进行字体声明：
//src/assets/main.css
@font-face {
font-family:“Roboto”；
字体粗细：400；
字体样式：正常；
字体显示：自动；
unicode-range:U 000-5FF；
src:本地(机器人)，
URL(/fonts/Roboto/Roboto-regular . woff2 )格式( woff 2 )，
URL(/fonts/Roboto/Roboto-regular . woff )格式( woff )；
}
首先要注意的是字体显示：自动。使用auto作为值允许浏览器使用最合适的策略来显示字体。这取决于一些因素，如网络速度、设备类型、空闲时间等。
为了更好地控制字体的加载方式，您应该使用font-display: block，它指示浏览器暂时隐藏文本，直到字体完全下载完毕。其他可能的值有交换、回退和可选。你可以在这里了解更多。
注意unicode-range: U 000-5FF，它指示浏览器只加载所需的字形范围(U 000-U 5FF)。您还希望使用woff和woff2字体格式，这是经过优化的格式，可以在大多数现代浏览器中使用。
另一个需要注意的是src序列。首先，我们检查字体的本地副本是否可用(local(Roboto ))并使用它。很多安卓设备都预装了Roboto。在这种情况下，我们将使用预安装的副本。如果没有本地拷贝，继续下载有浏览器支持的woff2格式。否则，它将跳转到受支持声明中的下一种字体。
预加载字体
一旦您的自定义字体被声明，您可以使用link rel=preload 告诉浏览器预先加载字体。在public/index.html中，添加以下内容：
环
rel=预载
as=font
href=。/fonts/Roboto/Roboto-regular . woff 2
type=font/woff2
crossorigin=匿名
/
Rel="preload "指示浏览器尽快开始获取资源，as="font "告诉浏览器这是字体，所以优先处理请求。还要注意cross origin="anonymous ，因为没有这个属性，浏览器会丢弃预装的字体。这是因为浏览器匿名获取字体，所以您可以使用该属性匿名请求字体。
使用link=preload可以增加自定义字体在需要之前被下载的机会。这个小小的调整大大加快了字体的加载速度，从而加快了Web应用程序中的文本呈现速度。
使用 link = preconnect 托管字体
使用Google fonts等网站托管字体时，使用link=preconnect可以获得更快的加载时间。它告诉浏览器提前与域名建立连接。
如果您使用的是Google Font提供的Roboto字体，您可以在public/index.html中执行以下操作：
link rel= pre connect href= https://fonts . gstatic . com /
.
环
href= https://fonts . Google APIs . com/css2？ family=Robotodisplay=swap
rel=样式表
/
这样，与起源https://fonts.gstatic.com的最初联系就可以建立起来了。当浏览器需要从原点获取资源时，连接已经建立。从下图可以看出两者的区别。
加载字体时不使用link=preconnect时，可以看到连接所需的时间(DNS查找、初始连接、SSL等。).当像这样使用link=preconnect时，结果看起来非常不同。
在这里，你会发现花在DNS查找、初始连接和SSL上的时间已经不存在了，因为之前的连接已经做好了。
使用 service workers 缓存字体
字体是静态资源，几乎没有什么变化，所以它们是缓存的好对象。理想情况下，您的Web服务器应该为字体设置一个长的max-age expires头，这样浏览器就可以用更长的时间来缓存字体。如果您正在构建渐进式web应用程序(PWA ),那么您可以使用服务工作器来缓存字体，并直接从缓存中为它们提供服务。
要开始使用Vue构建PWA，请使用vue-cli工具生成一个新项目：
vue创建pwa-app
选择手动选择功能选项，然后选择渐进式Web应用程序(PWA)支持：
这些是我们生成PWA模板所需的唯一内容。之后可以把目录改成pwa-app，然后服务app。
cd pwa-app
纱线服务
您会注意到src目录中有一个文件registerServiceWorker，它包含默认配置。在项目的根目录下，如果vue.config.js不存在，请创建。如果有，请添加以下内容：
//vue.config.js
模块.导出={
pwa: {
工具箱选项：{
skipWaiting:没错，
clientsClaim: true，
},
},
};
vue-cli工具使用PWA插件来生成服务工作者。在底层，它使用Workbox来配置服务工作器及其控制的元素、要使用的缓存策略以及其他必要的配置。
在上面的代码片段中，我们希望确保我们的应用程序始终由最新版本的service worker控制。这是必要的，因为它确保我们的用户总是检查应用程序的最新版本。您可以签出Workbox配置文档，以获得对生成的服务工作者行为的更多控制。
接下来，我们将自定义字体添加到公共目录中。我有以下结构：
根/
公共/
index.html
字体/
机器人/
Roboto-Regular.woff
Roboto-Regular.woff2
Vue应用程序的开发完成后，可以通过从终端运行以下命令来构建它：
纱线结构
这会将结果输出到dist文件夹。如果您检查文件夹的内容，您会注意到一个类似于pre chache-manifest . 1234567890 . js的文件，它包含要缓存的资产列表，这只是一个包含修订版和URL的键值对列表。
自我。_ _ pre chemanifest=(self。_ _ pre chemanifest [])。concat([
{
版本: 3628b4ee5b153071e725 ，
URL :/fonts/Roboto/Roboto-regular . woff 2
},
.
]);
默认情况下，public/文件夹中的所有内容都会被缓存，包括自定义字体。有了这个地方，您可以使用service之类的包来为您的应用程序提供服务，或者在web服务器上托管dist文件夹来查看结果。您可以在下面找到应用程序的截图。
在后续的访问中，从缓存中加载字体，可以加快应用的加载时间。
结论
在本文中，我们研究了在Vue应用程序中加载字体时应用的一些最佳实践。使用这些实践将确保您提供的字体看起来很好，而不会影响应用程序的性能。
关于Vue.js加载字体的正确方法这篇文章就到这里了，关于Vue.js加载字体的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。