什么是字体排版测试工具？

字体排版测试器让你实时调整字体属性并即时查看效果。选择字体族，调节字号、字重、行高和间距，然后直接复制 CSS 到你的项目中。

你可以设置字体、字号、字重（100 到 900）、行高、字间距、词间距、对齐、文字变换和颜色。示例文字可编辑，能直接预览自己的真实标题或段落，下面的 CSS 输出面板一键复制就能贴到样式表或样式组件里。

使用方法

1. 在预览区域输入或粘贴您的示例文字。
2. 调整排版控制参数：字体族、字号、字重、行高、字间距和词间距。
3. 复制 CSS 输出，直接将排版设置应用到您的项目中。

何时使用

• 调试博客正文，确认 18px Inter 配 1.6 行高在手机上读起来舒服。
• 把同一篇长文分别用 16、17、18px 看一遍，找出最能让人读下去的那个字号。
• 看看加大字间距能不能解决全大写按钮文字挤在一起的问题。

结果

一位网页设计师将 Inter 字体设置为 18px、行高 1.6、字间距 0.02em 后，复制 CSS 代码用于博客样式表。

常见问题

正文用多大的行高比较合适？

16 到 18 像素的长文段落，行高在 1.5 到 1.7 之间在屏幕上读起来最舒服。标题应该更紧一点，一般 1.1 到 1.3。在示例框里把标题和段落都打上去，对比一下就知道差别。

字间距为什么用 em 而不是 px？

em 会随字号缩放，所以 0.02em 的字间距在 14px 和 48px 文字上看着比例一致。用像素表示的字间距，往往在一个字号下合适，换个字号就明显不对。

哪些字重在网页上可以放心使用？

现代 Google Fonts 和可变字体支持 100 到 900，但很多自托管字体只带 400 和 700。如果切换字重时预览没有变化，多半是字体本身没有那个字重，浏览器只能做合成处理。

可以测试页面没预加载的字体吗？

直接从内置字体菜单里选——带搜索框，还有 无衬线 / 衬线 / 等宽 / 系统 分类筛选，选中的 Google Fonts 会自动加载。切到「字体墙」就能用同一段示例文字一次看遍所有字体，或者打开「对比」把两种字体并排看。这里不支持上传自定义字体文件，那种情况要在自己的网站里写 @font-face。

怎么把 CSS 复制到 React 或 Tailwind 项目里？

点「复制 CSS」会得到一组标准声明。React 里贴进 styled-components 的模板字符串就能用，或把每一行转成驼峰命名的对象键。Tailwind 项目把字号和字重对到工具类上，自定义的字间距和行高用任意值语法。

相关工具