首页 前端知识 Vue使用font-face自定义字体详解

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

2024-06-05 13:06:12 前端知识 前端哥 447 35 我要收藏

目录

      • 1 介绍
      • 2 使用
        • 2.1 语法
        • 2.2 属性说明
        • 2.3 Vue使用案例
          • 2.3.1 全局定义字体
          • 2.3.2 在页面使用
      • 3 注意事项

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

  • 字体文件可能会比较大,因此加载它们可能会对页面加载速度产生影响。为了优化性能,考虑使用字体压缩技术,并只包含你实际需要的字符集。
  • 确保你有权使用你正在加载的字体。一些字体可能受到版权保护,未经许可不得用于商业用途。
  • 测试你的字体在各种浏览器和设备上的兼容性。不同的浏览器和设备可能对不同的字体格式有不同的支持程度。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10836.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!