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()描述符中常用的一些字体格式及其简要说明：

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

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

2.3 Vue使用案例

2.3.1 全局定义字体

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

SourceHanSansCN；
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 注意事项

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