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