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

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

到此这篇关于Vue使用font-face自定义字体的案例详解的文章就介绍到这了,更多相关Vue font-face自定义字体内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！