上一篇
html中常用字体有哪些？网页设计常用字体推荐
在 HTML 和 CSS 开发中，字体选择不仅关乎页面的美观度，更直接影响用户的阅读体验和页面的加载性能，由于不同操作系统（Windows, macOS, Linux, Android, iOS）预装的字体库存在差异，开发者通常需要通过“字体栈”（Font Stack）的策略来确保跨平台的一致性。
常用字体分类与特性
为了便于理解，我们将 HTML 中常用的字体分为三大类：系统默认字体、Web 安全字体以及现代网络字体。
系统默认与通用字体族
这些字体在几乎所有设备上都有原生支持，加载速度最快,但样式较为单一。
| 字体族名称 | 常见具体字体示例 | 主要特点与适用场景 |
|---|---|---|
| Sans-serif (无衬线体) | Arial, Helvetica, Verdana, Tahoma | 现代、简洁、易读，适用于正文、UI 界面、移动端页面，Helvetica 是 macOS 默认，Arial 是 Windows 默认。 |
| Serif (衬线体) | Times New Roman, Georgia, Palatino | 传统、正式、优雅，常用于新闻网站、长篇阅读文章、学术论文或需要体现权威感的场景。 |
| Monospace (等宽字体) | Courier New, Consolas, Monaco | 字符宽度一致，主要用于代码展示、数据表格对齐或复古风格设计。 |
| Cursive (手写体) | Comic Sans MS, Brush Script MT | 随意、活泼，通常用于非正式场合或儿童相关内容，但在专业设计中较少使用。 |
| Fantasy (装饰体) | Impact, Impact, Zapf Dingbats | 装饰性强，仅用于标题或特殊强调，不适合正文阅读。 |
跨平台 Web 安全字体
这些字体在主流操作系统中广泛预装，兼容性极佳,是构建稳健网页的基础。
- Arial / Helvetica: 无衬线体的黄金标准。Arial 在 Windows 上表现最佳，Helvetica 在 macOS/iOS 上更原生，通常写作 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;。
- Times New Roman: 衬线体的代表,广泛用于传统出版物和正式文档的网页版。
- Georgia: 专为屏幕阅读优化的衬线体，比 Times New Roman 更清晰,适合长文阅读。
- Verdana: 设计初衷是为了在小屏幕上保持高可读性，字间距较大,适合正文。
- Courier New: 标准的等宽字体,用于代码块展示。
现代网络字体 (Web Fonts)
随着 @font-face 和 Google Fonts、Adobe Fonts 等服务的发展，开发者可以引入非系统预装字体,实现更丰富的设计效果。
- Roboto: Android 系统的默认字体，现代、中性，广泛用于 Material Design 风格网站。
- Open Sans: 极其流行的无衬线体，具有友好的阅读体验,被许多大型网站采用。
- Lato: 半圆润的无衬线体,既专业又不失亲和力。
- Montserrat: 几何感强的无衬线体,适合标题和现代品牌设计。
- Noto Sans / Noto Serif: Google 推出的“无缺字体”系列，旨在覆盖全球所有语言字符，特别是中文、日文、韩文等多语言支持。
中文字体特殊性
中文字体文件体积庞大，且各操作系统预装情况复杂,因此处理中文时策略与英文不同。
- Windows 默认: 微软雅黑 (Microsoft YaHei)
- macOS/iOS 默认: 苹方 (PingFang SC)
- 通用 fallback: 黑体 (Heiti SC), 宋体 (SimSun)
推荐的中文字体栈写法：
font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", "SimSun", sans-serif;
注意：尽量避免直接使用“宋体”作为正文首选，因为在高分辨率屏幕上，传统宋体的衬线细节可能显得杂乱，现代设计更倾向于使用“黑体”类字体。
最佳实践建议
- 始终提供 fallback：永远不要只指定一个字体，如果首选字体加载失败或不可用，浏览器会回退到下一个字体，最后回退到通用字体族（如 sans-serif）。
- 字体名称加引号：如果字体名称包含空格（如 Times New Roman），必须用引号包裹，否则 CSS 解析会出错。
- 性能考量：
- 优先使用系统字体，减少 HTTP 请求和文件大小。
- 如果必须使用自定义字体，考虑使用 font-display: swap; 避免文字不可见（FOIT 问题）。
- 使用 font-weight 和 font-style 的子集加载（Subset）功能，只加载需要的字符和字重,减小文件体积。
- 可读性优先：正文行高（line-height）建议在 1.5-1.8 之间，字号不小于 16px,以确保良好的阅读体验。
相关问题与解答
Q1: 为什么我的自定义字体在某些设备上显示不出来？
A: 这通常由以下几个原因导致：
- 字体文件路径错误
：检查 @font-face 中 src: url(...) 的路径是否正确，是否相对于 CSS 文件。
- MIME 类型未配置：服务器未正确配置字体文件的 MIME 类型（如 .woff2 应为 font/woff2）,导致浏览器拒绝加载。
- 跨域问题 (CORS)：如果字体文件托管在另一个域名下，服务器需要配置正确的 CORS 头（Access-Control-Allow-Origin）。
- 字体格式兼容性：确保提供了多种格式（如 .woff2, .woff, .ttf）以兼容不同浏览器，现代浏览器首选 .woff2。
- 字体名称拼写错误：font-family 中引用的名称必须与 @font-face 中 font-family 定义的名称完全一致。
- 使用系统字体栈：优先依赖用户设备已安装的字体（如苹方、微软雅黑）,避免加载额外文件。
- 子集化 (Subsetting)：如果必须使用自定义中文字体，使用工具（如 font-spider, woff2compress）只打包页面中实际用到的汉字，可将文件从几 MB 缩小到几十 KB。
- 使用 Google Fonts 或 CDN：如果引用在线字体服务，确保使用 HTTPS 并启用缓存。
- 预加载关键字体：在 HTML <head> 中使用 <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> 提前加载关键字体,减少渲染阻塞。
- 考虑使用变量字体 (Variable Fonts)：如果品牌设计允许，使用单个变量字体文件替代多个字重文件（如 regular, bold, italic），减少 HTTP 请求数量。
Q2: 如何优化网页中中文字体的加载速度？
A: 中文字体文件通常有几 MB 大小,优化策略包括：
