🔤 字体预览器
预览各种Web安全字体，无需网络请求，直接使用系统字体
什么是字体预览工具？
字体预览工具是一种帮助设计师和开发者在浏览器中实时预览和比较不同字体效果的在线工具。字体是界面设计中影响用户体验的关键因素——不同字体传达不同的情感和品牌调性。Serif字体（衬线体）传达传统和优雅，Sans-serif（无衬线体）传达现代和简洁，Monospace（等宽字体）适合代码和技术内容。选择字体时需要查看不同字号、字重下的效果，测试中英文混排的视觉和谐度，以及长文本的可读性。本工具加载了数十种常用Web字体，支持实时调整字号、字重、行高和颜色，让开发者在部署前充分评估字体效果。
如何使用字体预览工具
- 选择字体 — 从字体列表中选择想要预览的字体，支持搜索和分类筛选。
- 输入预览文本 — 输入自定义文本或使用默认示例文本，支持中英文混合预览。
- 调整样式参数 — 调整字号、字重、行高、字间距和文本颜色，实时查看效果变化。
常见使用场景
场景一：网站字体选型
为新网站选择合适的正文字体和标题字体，通过预览对比不同字体的视觉效果和可读性。
场景二：品牌字体搭配
测试标题字体和正文字体的搭配效果，确保两者在风格和可读性上协调一致。
场景三：多语言字体验证
验证字体在不同语言字符集（中文、日文、韩文、阿拉伯文等）下的渲染效果和回退表现。
技术原理
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%。
常见问题
Q：Web字体加载慢怎么办？
A：使用font-display: swap让浏览器先用系统字体显示文字。使用woff2格式减小文件体积。只加载需要的字重（如只加载400和700），避免加载完整字体包。
Q：serif和sans-serif怎么选？
A：Sans-serif（无衬线体）在屏幕上通常更易读，适合现代UI设计。Serif（衬线体）传达传统和权威感，适合长文阅读和品牌标题。两者搭配使用是常见方案。
Q：中文字体文件太大怎么优化？
A：使用字体子集化（subset）工具，只保留页面实际使用的字符。也可以使用系统字体栈，优先使用系统自带中文字体（如PingFang SC、Microsoft YaHei）。
Q：什么是FOIT和FOUT？
A：FOIT（Flash of Invisible Text）：Web字体加载中文字不可见。FOUT（Flash of Unstyled Text）：先显示系统字体再切换为Web字体。font-display: swap使用FOUT策略，用户体验更好。
Q：如何测试字体的中英文混排效果？
A：在预览工具中输入中英文混合的段落，观察中西文字符的基线对齐、字间距一致性和整体节奏感。好的中英文混排应该视觉均匀、无突兀感。