网页字体的小知识
因为最近一段时间在折腾博客，其中关于网页上的字体，自己有一些疑问，所以在网上查询了一些资料，这里做一个简单的总结。
一。字体的分类
常见的字体分类五类，分别是 Serif、Sans Serif、Slab Serif、Decorative、Handwritten、Outline。
各自的特点如下：
- Serif：衬线体，字母笔画末端带有装饰性的"衬线"（小短线），笔画粗细对比明显。
- Sans Serif：无衬线体，笔画粗细均匀，造型简洁。
- Slab Serif：粗衬线体，衬线粗壮且与主笔画等宽，整体厚重有力。
- Decorative：装饰体，高度风格化，设计夸张，辨识度极强。
- Handwritten：手写体，模仿手写笔迹，线条自然流畅，更能表现出作者的个人特色。
- Outline：轮廓体，字母仅保留轮廓线，内部中空或透明。
快速对比表
| 类别 | 核心特点 | 适用场景 | 代表字体 |
|---|---|---|---|
| Serif | 带衬线，传统优雅 | 印刷品、正式文档 | Times New Roman |
| Sans Serif | 无衬线，简洁现代 | 网页、UI 设计 | Helvetica |
| Slab Serif | 粗衬线，厚重有力 | 标题、复古风格 | Rockwell |
| Decorative | 夸张风格，高辨识度 | 活动海报、主题设计 | Comic Sans |
| Handwritten | 手写笔迹，自然流畅 | 个性化品牌、贺卡 | Brush Script |
| Outline | 轮廓线，中空透明 | 霓虹灯效果、未来风 | Arial Rounded |
简单总结
日常使用中主要是 Serif 和 Sans Serif，如果喜欢圆润一点，可以使用 Sans Serif，否则使用 Serif。
二。字体的使用
在网页中使用字体，主要是使用 text 中的 font-family 属性，例如：
font-family: Arial, sans-serif;
在这个里面，你可以指定多个字体，浏览器会按照顺序查找，如果找不到就会使用默认字体。
在 text 中，这个叫做 字体回退（Fallback）堆栈，是一种策略，用于确保在不同操作系统、浏览器或设备上都能以最佳方式显示文本。它的核心原则是“从最具体到最通用”，即优先使用理想的字体，如果不可用，则逐步回退到替代选项，最后使用系统默认字体。
使用示例
- 通用无衬线（Sans-Serif）堆栈，适用于现代 UI、网页正文、技术类网站：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- 解析：
- -apple-system → macOS/iOS 默认字体（San Francisco）
- BlinkMacSystemFont → Chrome/Edge 在 macOS 的字体
- Segoe UI → Windows 默认
- Roboto → Android/Chrome OS
- Helvetica → 通用高质量无衬线
- Arial → 最广泛支持的无衬线
- sans-serif → 最终回退
- Emoji 相关 → 确保表情符号正确显示
- 通用衬线（Serif）堆栈，适用于传统印刷风格、博客、新闻网站：
font-family: Georgia, "Times New Roman", Times, serif;
- 解析：
- Georgia → 屏幕优化衬线体
- Times New Roman → 传统印刷标准
- Times → 旧系统备用
- serif → 最终回退
- 等宽字体（Monospace）堆栈，适用于代码、日志、技术文档：
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
- 解析：
- ui-monospace → 系统默认等宽（新标准）
- SFMono-Regular → macOS 代码字体
- Menlo → macOS 备用
- Consolas → Windows 优质等宽
- Liberation Mono → Linux 兼容
- Courier New → 通用回退
字体回退策略的最佳实践
- 优先使用系统字体（如 -apple-system, Segoe UI）→ 提升性能和一致性。
- 覆盖多平台（Windows/macOS/Android/Linux）。
- 包含 Emoji 支持 → 避免显示为黑白符号。
- 最后回退到通用族（sans-serif, serif, monospace）。
- 测试不同设备 → 确保实际效果符合预期。
三。字体相关网站
- Google Fonts：提供免费的高质量字体，可用于网页设计。
- Font Squirrel：提供免费的字体库，包括多种格式和样式。
- Adobe Fonts：提供付费的字体，包括商业使用许可。
- 中文网字计划：一套开源的、全方位的、全场景的 Web 字体解决方案。
四。自己使用过的字体
- 霞鹜字体
- 仓耳今楷
- Noto Serif Simplified Chinese：目前博客主要使用的字体。
- Maple Mono：代码块所用字体。