# CSS3核心特性-第8章-8.4-自定义字体（@font-face） ## 8.4 自定义字体（@font-face） ### 学习目标 - 掌握`@font-face`规则的语法结构及字体格式要求 - 理解字体文件格式（TTF/OTF/WOFF）的兼容性差异 - 学会优化自定义字体加载性能（字体子集、预加载策略） - 能够解决自定义字体在不同浏览器中的渲染问题 ### 概念讲解 `@font-face`是CSS3引入的核心特性，允许网页加载并使用用户系统中未安装的自定义字体文件，彻底摆脱了对系统默认字体的依赖。这一特性极大地提升了网页设计的视觉表现力，使设计师能够精确还原品牌字体和创意排版。 **核心价值**： - **品牌一致性**：确保跨平台字体显示一致，避免因系统字体缺失导致的设计偏差 - **创意自由度**：支持艺术字体、图标字体等特殊排版需求 - **性能优化**：通过WOFF2等现代格式减少字体文件体积，提升加载速度 **字体格式对比**： | 格式 | 全称 | 压缩率 | 浏览器支持 | 适用场景 | | ----- | ------------------------ | --------------------- | --------------------------------- | ---------------- | | TTF | TrueType Font | 无压缩 | 所有浏览器 | 本地开发测试 | | OTF | OpenType Font | 无压缩 | 所有浏览器 | 印刷行业标准格式 | | WOFF | Web Open Font Format | 中等压缩 | IE9+、所有现代浏览器 | 通用Web字体格式 | | WOFF2 | Web Open Font Format 2.0 | 高压缩（比WOFF小30%） | Chrome 36+、Firefox 39+、Edge 14+ | 现代网页首选 | | EOT | Embedded OpenType | 中等压缩 | IE专用 | 仅IE6-8兼容需求 | > ⚠️ 注意：WOFF2是目前最优选择，兼具高压缩率和广泛兼容性，建议作为主要格式，同时提供WOFF作为降级方案。 ### 语法参考 #### 基础语法结构 ```css @font-face { font-family: "自定义字体名称"; /* 必须，用于后续引用 */ src: url("font.woff2") format("woff2"), /* 现代浏览器优先加载 */ url("font.woff") format("woff"), /* 降级方案 */ url("font.ttf") format("truetype"); /* 兼容性兜底 */ font-weight: normal; /* 可选，指定字体粗细（normal/bold/100-900） */ font-style: normal; /* 可选，指定字体样式（normal/italic/oblique） */ font-display: swap; /* 可选，控制字体加载策略 */ unicode-range: U+0020-007E; /* 可选，指定字体覆盖的字符范围 */ } /* 使用自定义字体 */ body { font-family: "自定义字体名称", sans-serif; } ``` #### 关键属性详解 1. **font-family** 定义字体名称，后续通过`font-family`属性引用。建议使用有意义的名称，如`"Brand-Regular"`或`"IconFont"`。 2. **src** 指定字体文件URL及格式，支持多格式声明（按优先级排序）。`format()`函数必须正确指定格式类型，帮助浏览器快速识别。 3. **font-weight/font-style** 可定义同一字体家族的不同字重和样式，实现字体的精细化控制： ```css /* 粗体版本 */ @font-face { font-family: "Brand"; src: url("brand-bold.woff2") format("woff2"); font-weight: bold; /* 700 */ font-style: normal; } /* 斜体版本 */ @font-face { font-family: "Brand"; src: url("brand-italic.woff2") format("woff2"); font-weight: normal; /* 400 */ font-style: italic; } ``` 4. **font-display** 控制字体加载过程中的显示策略，解决" FOIT (Flash of Invisible Text) "问题： - `swap`：先显示备用字体，字体加载完成后替换（推荐） - `fallback`：短暂隐藏（100ms）后显示备用字体 - `auto`：由浏览器决定（可能导致FOIT） - `block`：隐藏文本直到字体加载完成（不推荐） - `optional`：仅在字体预加载成功时使用自定义字体 5. **unicode-range** 指定字体覆盖的字符范围，实现字体子集化加载： ```css /* 仅包含ASCII字符 */ unicode-range: U+0020-007E; /* 仅包含数字和标点 */ unicode-range: U+0030-0039, U+0021-002F, U+003A-0040; ``` ### 实战示例 #### 基础实现：引入品牌字体 ```css /* 定义自定义字体 */ @font-face { font-family: "Montserrat"; src: url("montserrat-regular.woff2") format("woff2"), url("montserrat-regular.woff") format("woff"); font-weight: 400; /* 正常字重 */ font-style: normal; font-display: swap; } /* 应用到页面 */ body { font-family: "Montserrat", "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; } h1, h2, h3 { font-family: "Montserrat", "Helvetica Neue", sans-serif; font-weight: 700; /* 对应粗体字重 */ } ``` #### 高级应用：图标字体实现 ```css /* 定义图标字体 */ @font-face { font-family: "IconFont"; src: url("icons.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } /* 创建图标类 */ .icon { font-family: "IconFont" !important; speak: never; /* 阻止屏幕阅读器朗读 */ font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } /* 具体图标 */ .icon-home:before { content: "e001"; } .icon-user:before { content: "e002"; } .icon-settings:before { content: "e003"; } ``` #### 性能优化：字体预加载 在HTML头部添加``提前加载关键字体： ```html ``` > ⚠️ 注意：必须添加`crossorigin`属性，否则预加载的字体无法被`@font-face`使用。 ### 注意事项 1. **兼容性处理** - IE9-11不支持WOFF2，需提供WOFF格式降级 - iOS Safari < 10不支持`font-display`，可使用JavaScript字体加载库（如FontFaceObserver） - 中文字体体积较大，建议使用字蛛等工具提取子集 2. **性能优化策略** - 始终优先使用WOFF2格式 - 对多字重字体拆分文件，而非单个大文件 - 使用`unicode-range`拆分常用字符与特殊字符 - 结合`preload`预加载关键字体 - 限制每页使用的自定义字体数量（建议≤3种） 3. **法律风险提示** - 确保自定义字体拥有Web嵌入授权（尤其是商业字体） - 免费字体推荐：Google Fonts、Font Squirrel、思源黑体等 4. **渲染问题解决** - **字体模糊**：在Windows上添加`-webkit-font-smoothing: antialiased` - **行高异常**：自定义字体可能导致行高变化，需重新校准 - **闪烁问题**：使用`font-display: swap`或字体加载库 ### 自测题 1. 以下哪种字体格式压缩率最高且兼容性最广？ A. TTF B. WOFF C. WOFF2 D. EOT 2. 如何解决自定义字体加载时的" FOIT "问题？ A. 设置`font-display: block` B. 设置`font-display: swap` C. 使用`unicode-range`限制字符集 D. 增加字体文件体积 3. 实现图标字体时，为什么需要设置`speak: never`？ A. 提高渲染性能 B. 防止屏幕阅读器朗读无意义字符 C. 兼容旧浏览器 D. 减小文件体积 4. 以下哪个属性可以控制自定义字体的加载优先级？ A. `src`中的URL顺序 B. `font-weight` C. `unicode-range` D. `font-family` **答案**：1.C 2.B 3.B 4.A ### 扩展阅读 - [MDN @font-face文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face) - [Google Fonts开发者指南](https://developers.google.com/fonts/docs/getting_started) - [Font Squirrel字体生成器](https://www.fontsquirrel.com/tools/webfont-generator) - [字体性能优化实践](https://web.dev/articles/font-best-practices)