🔤 字体预览器

什么是字体预览工具？

字体预览工具是一种帮助设计师和开发者在浏览器中实时预览和比较不同字体效果的在线工具。字体是界面设计中影响用户体验的关键因素——不同字体传达不同的情感和品牌调性。Serif字体（衬线体）传达传统和优雅，Sans-serif（无衬线体）传达现代和简洁，Monospace（等宽字体）适合代码和技术内容。选择字体时需要查看不同字号、字重下的效果，测试中英文混排的视觉和谐度，以及长文本的可读性。本工具加载了数十种常用Web字体，支持实时调整字号、字重、行高和颜色，让开发者在部署前充分评估字体效果。

如何使用字体预览工具

1. 选择字体 — 从字体列表中选择想要预览的字体，支持搜索和分类筛选。
2. 输入预览文本 — 输入自定义文本或使用默认示例文本，支持中英文混合预览。
3. 调整样式参数 — 调整字号、字重、行高、字间距和文本颜色，实时查看效果变化。

常见使用场景

技术原理

Web字体通过CSS @font-face规则加载：

/* Web字体加载方式 */
/* 1. Google Fonts（CDN托管） */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700');

/* 2. @font-face（自托管） */
@font-face {
    font-family: 'CustomFont';
    src: url('/fonts/custom.woff2') format('woff2'),
         url('/fonts/custom.woff') format('woff');
    font-weight: 400;
    font-display: swap; /* 避免FOIT */
}

/* 3. 字体栈（Fallback） */
body {
    font-family: 'Inter', -apple-system,
        BlinkMacSystemFont, 'Segoe UI',
        sans-serif; /* 系统字体作为回退 */
}

/* 性能优化：font-display属性
   swap: 先用系统字体显示，Web字体加载完替换
   optional: 只在极短时间内等待Web字体
   fallback: 短暂等待后使用系统字体 */

最佳实践与注意事项

• Web字体文件通常较大（中文字体可达数MB），建议使用font-display: swap避免加载时文字不可见。
• 建立字体栈（font stack）：指定多个回退字体，确保Web字体加载失败时界面不会崩溃。
• 正文行高建议1.5-1.8倍字号，标题行高可以稍紧凑（1.2-1.4倍）。
• 中文正文字号不建议小于14px，英文可以小到12px。标题字号建议至少比正文大30%。

常见问题