在Vue.js中加载字体的最佳做法

更新日期: 2021-04-13阅读: 1.8k标签: 字体
博客原文:https://blog.zhangbing.site/2021/04/07/best-practices-for-loading-fonts-in-vue/

添加字体不应该对性能产生负面影响。在本文中,我们将探讨在 vue 应用程序中加载字体的最佳实践。


正确声明font-face的字体

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

/root
  public/
    fonts/
      Roboto/
        Roboto-Regular.woff2
        Roboto-Regular.woff
    index.html
  src/
    assets/
      main.css
    components/
    router/
    store/
    views/
    main.js

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

// 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格式。否则,它会跳至支持的声明中的下一个字体。


预加载字体

一旦你的自定义字体被声明,你可以使用 <link rel="preload"> 告诉浏览器提前预加载字体。在 public/index.html 中,添加以下内容:

<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 中执行以下操作:

<link rel="preconnect" href="https://fonts.gstatic.com">
...
<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工具生成一个新项目:

vue create pwa-app

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


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

cd pwa-app
yarn serve

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

// vue.config.js
module.exports = {
  pwa: {
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
    }
  }
}

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

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

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

root/
  public/
    index.html
    fonts/
      Roboto/
        Roboto-Regular.woff
        Roboto-Regular.woff2

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

yarn build

这将结果输出到 dist 文件夹中。如果你检查文件夹的内容,你会注意到一个类似于 precache-manifest.1234567890.js 的文件。它包含了要缓存的资产列表,这只是一个包含修订版和URL的键值对的列表。

self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "3628b4ee5b153071e725",
    "url": "/fonts/Roboto/Roboto-Regular.woff2"
  },
  ...
]);

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

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


结论

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


链接: https://www.fly63.com/article/detial/10203

H5禁止微信内置浏览器调整字体大小

微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节。但是这也会导致字体大小改变以后,出现页面布局错乱的情况。

CSS3样式_实现字体发光效果

text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果。其实不然,这正是 text-shadow 属性的精妙之处。当阴影的水平偏移量和垂直偏移量都为0时,阴影就和文本重合了。这时,如果增大阴影模糊的距离,就可以达到字体外发光的效果了。

css3 文字闪烁效果_html实现文字闪烁代码的多种形式

这篇文章总整理了3种文字闪烁效果,主要使用到css3的animation属性,闪烁效果包括:通过改变透明度来实现文字的渐变闪烁、通过设置text-shadow的值,来实现文字阴影闪烁的效果、利用背景图片或者背景渐变,实现文字颜色的闪烁效果

css3 自定义字体_使用@font-face方式实现个性化字体

当我们在浏览一些网站时发现,里面含有一些十分个性的字体,这些字体并不是我们电脑上安装的字体。那么css是如何实现自定义字体的呢?在css3中可以通过@font-face模块,把自己定义的Web字体嵌入到你的网页。

前端开发你该知道的字体 font-family

小小的字体其实有大大的学问,可能与字体相关的很多知识都偏设计,不过俗话说技多不压身,艺高人胆大,多了解了解总归没错。就 Web 常用的一些字体而言,经常听说的字体类型,大致可以分为这几种

css蚀刻字体_css3如何实现蚀刻文本?

css3利用text-shadow属性来实现蚀刻文本,创建文本显示为“蚀刻”或刻在背景中的效果。背景必须比阴影暗,效果才能发挥作用。 文字颜色应该稍微褪色,使其看起来像是刻在背景上的。

字体是如何渲染的?影响字体渲染的因素

Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset= 信息,这一般有最高的优先级;网页本身 meta header 中的 Content-Type 信息的 charset 部分,对于 HTTP 头未指定编码或者本地文件,一般是这么判断;假如前两条都没有找到,浏览器菜单里一般允许用户强制指定编码;

CSS3 font-face使用

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3,web 设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上

如何实现label长度固定,文字分散分布的效果

这种效果主要通过text-align-last属性来实现。text-align-last:规定如何对齐文本的最后一行,当文本只有一行的时候,text-align属性不设置,text-align-last也是有用的。当然这只是针对非IE和Safiri而言。

FontAwesome 图标字体库的使用

在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库。这里介绍一种常见的图标库——FontAwesome的使用。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!