文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

在Vue.js中加载字体的优秀做法(适应于其他静态资源)

2024-12-03 06:31

关注

正确声明font-face的字体

确保正确声明字体是加载字体的重要方面。这是通过使用 font-face 属性来声明你选择的字体来实现的。在你的Vue项目中,这个声明可以在你的根CSS文件中完成。在进入这个问题之前,我们先来看看Vue应用的结构。

  1. /root 
  2.   public/ 
  3.     fonts/ 
  4.       Roboto/ 
  5.         Roboto-Regular.woff2 
  6.         Roboto-Regular.woff 
  7.     index.html 
  8.   src/ 
  9.     assets/ 
  10.       main.css 
  11.     components/ 
  12.     router/ 
  13.     store/ 
  14.     views/ 

我们可以像这样在 main.css 中进行 font-face 声明:

  1. // src/assets/main.css 
  2.  
  3. @font-face { 
  4.   font-family: "Roboto"; 
  5.   font-weight: 400; 
  6.   font-style: normal; 
  7.   font-display: auto; 
  8.   unicode-range: U+000-5FF; 
  9.   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 中,添加以下内容:

  1. <link rel="preload" as="font" href="./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 中执行以下操作:

  1. <link rel="preconnect" href="https://fonts.gstatic.com"> 
  2. ... 
  3. <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 

这样就可以建立与原点https://fonts.gstatic.com 的初始连接,当浏览器需要从原点获取资源时,连接已经建立。从下图中可以看出两者的区别。

当加载字体时没有使用 link=preconnect 时,你可以看到连接所需的时间(DNS查找、初始连接、SSL等)。当像这样使用 link=preconnect 时,结果看起来非常不同。

在这里,你会发现DNS查找、初始连接和SSL所花费的时间已经不存在了,因为前面已经进行了连接。

使用service workers缓存字体

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

要开始使用Vue构建PWA,请使用vue-cli工具生成一个新项目:

  1. vue create pwa-app 

选择Manually select features选项,然后选择Progressive Web App (PWA) Support:

这些就是我们生成PWA模板所需要的唯一东西。完成后,你就可以把目录改为 pwa-app,然后为app服务。

  1. cd pwa-app 
  2. yarn serve 

你会注意到在 src 目录下有一个文件 registerServiceWorker,其中包含了默认的配置。在项目的根目录下,如果 vue.config.js 不存在,请创建它,如果存在,请添加以下内容:

  1. // vue.config.js 
  2. module.exports = { 
  3.   pwa: { 
  4.     workboxOptions: { 
  5.       skipWaiting: true, 
  6.       clientsClaim: true, 
  7.     } 
  8.   } 

vue-cli工具使用PWA plugin生成service worker。在底层,它使用Workbox来配置service worker和它控制的元素、要使用的缓存策略以及其他必要的配置。

在上面的代码片段中,我们要确保我们的应用程序始终由service worker的最新版本控制。这是必要的,因为它确保我们的用户总是查看应用程序的最新版本。您可以签出Workbox配置文档,以获得对生成的service worker行为的更多控制。

接下来,我们将自定义字体添加到 public 目录。我有以下结构:

  1. root/ 
  2.   public/ 
  3.     index.html 
  4.     fonts/ 
  5.       Roboto/ 
  6.         Roboto-Regular.woff 
  7.         Roboto-Regular.woff2 

一旦完成了Vue应用程序的开发,就可以通过从终端运行以下命令来构建它:

  1. yarn build 

这将结果输出到 dist 文件夹中。如果你检查文件夹的内容,你会注意到一个类似于

precache-manifest.1234567890.js 的文件。它包含了要缓存的资产列表,这只是一个包含修订版和URL的键值对的列表。

  1. self.__precacheManifest = (self.__precacheManifest || []).concat([ 
  2.   { 
  3.     "revision": "3628b4ee5b153071e725", 
  4.     "url": "/fonts/Roboto/Roboto-Regular.woff2" 
  5.   }, 
  6.   ... 
  7. ]); 

public/ 文件夹中的所有内容都是默认缓存的,其中包括自定义字体。有了这个地方,你可以用像service这样的包来serve你的应用程序,或者把 dist 文件夹托管在web服务器上查看结果。你可以在下面找到一个应用程序的截图。

在随后的访问中,字体是从缓存中加载的,这可以加快应用程序的加载时间。

结论

在这篇文章中,我们研究了在Vue应用程序中加载字体时应用的一些最佳实践。使用这些实践将确保你提供的字体看起来不错,而不影响应用的性能。

 

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯