上一篇
html前端字体怎么设置？html字体大小单位px和em的区别
在HTML前端开发中,字体不仅仅是视觉呈现的基础，更是用户体验、品牌识别以及页面性能的关键组成部分，合理配置字体可以显著提升页面的可读性、加载速度以及跨设备的一致性，以下将从字体选择、CSS属性配置、加载优化及兼容性处理等多个维度进行详细解析。
字体分类与选择策略
在前端开发中,字体通常分为两大类：系统字体和网络字体。
-
系统字体 (System Fonts)：
这是指用户操作系统中预装的字体，使用系统字体可以确保页面加载速度极快，因为无需下载额外的字体文件。
- 优点：零加载时间，性能最佳。
- 缺点：不同操作系统（Windows, macOS, Linux, Android, iOS）默认字体不同，可能导致视觉不一致。
- 适用场景：对性能要求极高、不需要强品牌字体识别的通用内容页面。
-
网络字体 (Web Fonts)：
通过 @font-face 规则从服务器加载自定义字体文件。
- 优点：完全控制视觉风格，跨平台一致性高。
- 缺点：增加HTTP请求，占用带宽，可能影响首屏加载速度（FCP）。
- 适用场景：品牌Logo、标题强调、特殊设计风格页面。
核心CSS属性详解
在CSS中,控制字体表现主要依赖以下几个关键属性：
| 属性 | 说明 | 常用值/示例 |
|---|---|---|
| font-family | 指定字体系列，浏览器会按顺序查找，直到找到可用的字体。 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| font-size | 设置字体大小，推荐使用相对单位以支持用户缩放。 | 16px, 1rem, 2em |
| font-weight | 设置字体的粗细。 | normal, bold, 100-900 (数字值) |
| font-style | 设置字体样式。 | normal, italic, oblique |
| line-height | 设置行高，影响文本的可读性。 | 5, 6 (无单位数值通常最佳) |
| letter-spacing | 设置字符间距。 | 05em, -0.02em |
| text-rendering | 提示浏览器如何优化文本渲染。 | optimizeLegibility (增加字距调整) |
使用 @font-face 加载网络字体
要使用自定义字体,必须通过 @font-face 规则声明，现代开发中，为了兼顾性能和兼容性，通常提供多种格式。
@font-face { font-family: 'MyCustomFont'; src: url('fonts/myfont.woff2') format('woff2'), url('fonts/myfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; / 关键属性，见下文优化部分 / } body { font-family: 'MyCustomFont', sans-serif; }
格式选择建议：
- WOFF2：首选格式，压缩率高，兼容现代浏览器。
- WOFF：备用格式，兼容较旧的浏览器（如IE11）。
- TTF/OTF：仅在需要支持极旧设备时使用，文件体积较大。
字体加载优化策略
字体加载不当会导致“字体闪烁”（FOIT Flash of Invisible Text）或“字体交换”（FOUT Flash of Unstyled Text），严重影响用户体验。
1 font-display 属性
这是控制字体加载行为的关键CSS属性,建议始终设置。
| 值 | 行为描述 | 适用场景 |
|---|---|---|
| auto | 浏览器默认行为，通常等待字体加载完成再显示文本（可能导致FOIT）。 | 不推荐，除非你能接受长时间白屏。 |
| block | 字体加载期间隐藏文本，加载完成后立即显示。 | ，用户等待时间短。 |
| swap | 推荐，字体加载期间使用备用字体（fallback），加载完成后立即替换。 | ，保证可读性。 |
| optional | 如果字体未在极短时间内加载，则使用备用字体且不替换。 | 非关键装饰性字体。 |
| fallback | 类似 swap，但有一个较短的超时时间。 | 介于 swap 和 block 之间。 |
2 预加载字体
对于首屏关键字体,可以使用 <link> 标签进行预加载，以减少加载延迟。
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
注意：crossorigin 属性是必须的，否则浏览器可能会拒绝加载。
3 子集化 (Subsetting)
如果字体文件过大,可以使用工具（如 font-spider 或 glyphhanger）生成只包含页面实际使用字符的子集字体文件，大幅减小体积。
跨平台字体栈 (Font Stack) 最佳实践
为了确保在不同设备上都有良好的显示效果,应使用字体栈，浏览器会从左到右查找，找到第一个可用的字体。
英文字体栈示例：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
- -apple-system / BlinkMacSystemFont：优先使用系统默认字体（iOS/macOS 使用 San Francisco，Windows 使用 Segoe UI）。
- "Segoe UI"：Windows 系统字体。
- Roboto：Android 系统字体。
- "Helvetica Neue" / Arial：通用备用字体。
中文字体栈示例：
font-family: "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
- "PingFang SC"：macOS 和 iOS 系统默认中文字体。
- "Microsoft YaHei"：Windows 系统默认中文字体。
- "WenQuanYi Micro Hei"：Linux 系统常用开源中文字体。
常见陷阱与注意事项
- 字体文件体积：避免加载整个字体文件，尤其是包含大量字符的CJK（中日韩）字体，务必使用子集化或仅加载必要的字重。
- 字体缓存：字体文件应设置较长的缓存时间（如一年），因为字体文件变化频率极低。
- 可变字体 (Variable Fonts)：现代浏览器支持可变字体，允许在一个文件中包含多个字重和样式，减少HTTP请求，使用时需确保字体文件支持可变轴。
- 无障碍访问：确保字体颜色与背景有足够的对比度，字体大小不小于16px（正文），并允许用户通过浏览器设置调整字体大小。
相关问题与解答
Q1: 如何判断我的网站是否应该使用系统字体还是网络字体？
A: 这取决于你的项目需求、品牌要求和性能指标。
-
选择系统字体的情况：
- 项目是内部工具、后台管理系统或内容型网站，对品牌视觉一致性要求不高。
- 对首屏加载速度（LCP）有极致要求，且无法接受任何字体加载延迟。
- 目标用户群体操作系统分布广泛,难以维护复杂的字体栈。
- 建议：使用现代系统字体栈（如上文提到的英文/中文栈），性能最优。
-
选择网络字体的情况：
- 品牌有强烈的视觉识别需求,必须使用特定的定制字体。
- 页面设计依赖特殊的字体样式（如极细、极粗、手写体）来实现设计效果。
- 目标用户群体集中在现代浏览器环境,且可以接受轻微的加载延迟（通过 font-display: swap 可缓解）。
- 建议：使用 @font-face 加载 WOFF2 格式，配合 font-display: swap，并考虑子集化以减小体积。
Q2: 为什么我的自定义字体在某些浏览器上不显示或显示为备用字体？
A: 这通常由以下几个原因导致：
- 字体文件路径错误：检查 src 中的 URL 是否正确，特别是相对路径和绝对路径的区别，确保服务器正确返回了字体文件（HTTP 200 状态码）。
- MIME 类型配置错误：服务器必须正确配置字体文件的 MIME 类型。
- .woff2 应为 font/woff2
- .woff 应为 font/woff
- 如果服务器返回错误的 MIME 类型（如 application/octet-stream），浏览器会拒绝加载字体。
- 跨域问题 (CORS)：如果字体文件托管在与主站不同的域名下，服务器必须配置正确的 CORS 头（Access-Control-Allow-Origin），在 <link> 预加载或 @font-face 中，确保添加了 crossorigin="anonymous" 属性。
- 字体格式不被支持：确保提供了现代浏览器支持的格式（WOFF2），如果只提供了 TTF，某些现代浏览器可能无法加载。
- 字体文件损坏：字体文件可能在传输过程中损坏，或生成时出错，可以使用在线工具验证字体文件的有效性。
