CSS3 字体
在 CSS3 标准中，新增了@font-face规则，允许开发者自由引入自定义字体文件（如 TTF、OTF、WOFF 等格式）。
与使用传统字体相比，能确保视觉风格的一致性，使设计人员能够精准控制不同终端上的字体渲染效果。
CSS3 @font-face 规则
在新的@font-face规则中，必须首先定义字体的名称（比如 MyCustomFont），然后指向该字体文件。
在调用字体的 URL 时，请使用小写字母的字体，大写字母在 IE 中会产生意外的结果。
@font-face {
font-family: 'MyCustomFont'; /* 定义字体名称（可自定义） */
src: url('mykaiczfont.woff2') format('woff2'), /* 优先加载更高效的 WOFF2 格式 */
url('mykaiczfont.woff') format('woff'); /* 兼容旧浏览器的 WOFF 格式 */
font-weight: normal; /* 指定字重（如 400、700） */
font-style: normal; /* 指定样式（normal / italic） */
font-display: swap; /* 控制字体加载期间的显示行为 */
}定义后，即可在 CSS 中调用该字体：
body {
font-family: 'MyCustomFont', sans-serif; /* 降级方案确保兼容性 */
}CSS3 注意事项
在使用@font-face自定义字体时，需要注意下面的事项，达到提高效率和兼容性的效果：
- 优先使用WOFF2格式 - 它比WOFF小约30%，加载更快
- 提供多种格式 - 确保跨浏览器兼容性
- 限制字体数量 - 每个字体都会增加HTTP请求和页面大小
- 使用font-display: swap - 避免字体加载时的布局偏移(FOUT)
- 子集化字体 - 只包含你需要的字符集（特别是中文等大字符集字体）
- 预加载关键字体 - 在HTML头部添加：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>CSS3 字体描述
下表列出了所有的字体描述和里面的@font-face规则定义：
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。规定字体的名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch |
|
可选。定义如何拉伸字体。默认是 "normal"。 |
| font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
| font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
评论区 0
发表评论
教程介绍
CSS3 是 CSS 技术的版本升级，在 CSS 基础上进行了扩展改进，引入了新的特性和模块。
36
章节
66
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈