20px
输入 CSS font-family 属性值，多个字体用逗号分隔。
“字里行间，皆是风景” 🎨
本工具旨在帮助开发者和设计师快速对比不同 CSS Font Family 在不同场景下的显示效果。 支持中英文混排、纯中文、纯英文预览，支持自定义字体配置并保存到本地。
衬线是指笔画末端的装饰性细节。衬线字体通常被认为更具传统感、优雅，适合长篇正文阅读。
常见示例： SimSun (宋体), Georgia, Times New Roman, Source Han Serif (思源宋体)。
"Sans" 在法语中意为“无”。无衬线字体笔画简洁，没有末端装饰，现代感强，在屏幕显示上通常更清晰。
常见示例： Microsoft YaHei (微软雅黑), PingFang SC (苹方), Arial, Helvetica, Source Han Sans (思源黑体)。
system-ui 和 -apple-system 是特殊的关键字，用于调用操作系统默认的界面字体。
• system-ui: 标准的 CSS 属性值，让网页字体与操作系统 UI 保持一致。中英文混排时，system-ui 会使用操作系统的默认 UI 字体栈，通常能智能处理多语言。如果操作系统的默认UI字体家族中包含了中文字体，那么中英文都会使用该字体家族中的相应字体。例如，在Windows上，英文字体使用“Segoe UI”，中文字体使用“Microsoft YaHei”；在macOS上，英文字体使用“San Francisco”，中文字体使用“PingFang SC”。
• -apple-system: 专门用于苹果设备（iOS/macOS）的私有属性，调用 San Francisco 字体。
使用系统字体可以提供最原生的用户体验，且无需加载额外的字体文件，性能最佳。
| 字体名称 | 支持中文 | 衬线类型 | 所属系统/平台 | 是否等宽 |
|---|---|---|---|---|
| Helvetica | ❌ 否 | 无衬线 (Sans-serif) | macOS (经典) | ❌ 否 |
| Arial | ❌ 否 | 无衬线 (Sans-serif) | Windows / macOS | ❌ 否 |
| sans-serif | 🌐 取决于系统 | 无衬线 (Sans-serif) | 通用 (CSS 关键字) | ❌ 否 |
| Segoe UI | ❌ 否 | 无衬线 (Sans-serif) | Windows | ❌ 否 |
| Roboto | ❌ 否 | 无衬线 (Sans-serif) | Android / ChromeOS | ❌ 否 |
| PingFang SC (苹方) | ✅ 是 | 无衬线 (Sans-serif) | macOS / iOS | ❌ 否 |
| Helvetica Neue | ❌ 否 | 无衬线 (Sans-serif) | macOS / iOS | ❌ 否 |
| MiSans L3 | ✅ 是 | 无衬线 (Sans-serif) | MIUI / HyperOS (小米) | ❌ 否 |
累计使用次数：99
您的自定义字体配置仅存储在您浏览器的 Local Storage 中，不会上传到服务器。