Vue使用font-face自定义字体详解

1 介绍

@font-face 是 CSS 中的一个规则，它允许你加载服务器上的字体文件（远程或者本地），并在网页中使用这些字体。这样，你可以使用非标准字体，从而给网页带来独特的视觉风格。

2 使用

2.1 语法

@font-face {  
  font-family: 'MyCustomFont';  
  src: url('myfont.woff2') format('woff2'),  
       url('myfont.woff') format('woff');  
  font-weight: normal;  
  font-style: normal;  
}

2.2 属性说明

• font-family: 为自定义字体定义一个名称，后续在 CSS 中使用这个名称来引用这个字体。
• src: 指定字体文件的 URL。你可以指定多个字体文件（远程或者本地，建议天秤本地地址，更具可靠性），浏览器会按照列出的顺序尝试加载。建议包含多种格式的字体文件，以确保在各种浏览器上的兼容性。
• format: 指定字体文件的格式。这有助于浏览器确定如何解释文件。常见的格式包括 woff2, woff, ttf, eot, svg 等。
• font-weight 和 font-style: 这些属性定义了字体的粗细和样式（如斜体）。

其中format()描述符用于指定字体文件的格式。这对于浏览器来说是非常重要的，因为它可以帮助浏览器正确地解析和加载字体文件。不同的浏览器可能支持不同的字体格式，因此提供多种格式可以确保更广泛的浏览器兼容性。

以下是format()描述符中常用的一些字体格式及其简要说明：

1. woff2：
   • WOFF 2.0 是 WOFF（Web Open Font Format）的更新版本，它提供了更好的压缩和更广泛的浏览器支持。
   • 它是目前推荐的字体格式，因为它提供了优秀的压缩效果，并且被现代浏览器广泛支持。
2. woff：
   • WOFF（Web Open Font Format）是专为网页设计的字体格式。
   • 它提供了良好的压缩效果，并且与多种浏览器兼容。
   • 如果不需要woff2格式，woff是一个很好的备选方案。
3. truetype (或 ttf)：
   • TrueType是一种广泛使用的字体格式，它支持高质量的字体渲染。
   • 然而，TrueType字体文件通常较大，不如woff或woff2压缩效果好。
   • 在某些情况下，特别是当其他格式不可用时，可以使用TrueType。
4. opentype (或 otf)：
   • OpenType是另一种广泛使用的字体格式，它支持多种字符集和丰富的字体特性。
   • 与TrueType类似，OpenType字体文件也可能较大。
5. svg：
   • SVG（Scalable Vector Graphics）字体是基于矢量的，这意味着它们可以缩放到任何大小而不会失去清晰度。
   • 然而，SVG字体通常比其他格式更大，并且不如其他格式常用。
   • 它们主要在老版本的浏览器中用于支持某些特殊字符集。
6. eot：
   • EOT（Embedded OpenType）是微软开发的一种字体格式，主要用于旧版本的Internet Explorer浏览器。
   • 随着Internet Explorer的使用率下降，EOT的需求也在减少。
7. bitmap formats (如 png, gif)：
   • 位图字体通常不是通过@font-face加载的，因为它们是基于像素的，不支持缩放。
   • 它们主要用于特定的情况，如创建自定义图标字体。

在@font-face规则中使用format()描述符时，你应该列出所有你提供的字体格式，以便浏览器进行兼容。浏览器会按照你列出的顺序尝试加载字体，直到找到它支持的格式为止。

2.3 Vue使用案例

2.3.1 全局定义字体

在index.html进行字体定义，以便全局都能访问到（实际生产上不建议这么做，加载会消耗资源）；这里我们定义两个字体：

1. SourceHanSansCN；
2. KaiTi

    @font-face {
      /* 思源黑体 */
      font-family: 'SourceHanSansCN';  
      src: url('../src/assets/fonts/SourceHanSansCN-Regular.otf') format('otf'),  
          url('../src/assets/fonts/SourceHanSansCN-Regular.otf') format('woff2');  
      font-weight: normal;  
      font-style: normal; 
    }
    @font-face {
      /* 楷体 */
      font-family: 'KaiTi';  
      src: url('../src/assets/fonts/KaiTi.ttf') format('otf');
      font-weight: normal;  
      font-style: normal; 
    }

2.3.2 在页面使用

<template>
 <label class="siyuan">零星可比炽日华，字若珠玑句无瑕</label>
 <br />
 <label class="kaiti">我是楷体</label>
</template>
<script>
export default {};
</script>
<style scoped>
.siyuan {
  font-family: "SourceHanSansCN", sans-serif;
  color: red;
}
.kaiti {
  font-family: "KaiTi", sans-serif;
  color: green;
}
</style>

效果如下：

3 注意事项

• 字体文件可能会比较大，因此加载它们可能会对页面加载速度产生影响。为了优化性能，考虑使用字体压缩技术，并只包含你实际需要的字符集。
• 确保你有权使用你正在加载的字体。一些字体可能受到版权保护，未经许可不得用于商业用途。
• 测试你的字体在各种浏览器和设备上的兼容性。不同的浏览器和设备可能对不同的字体格式有不同的支持程度。