使用方法
查看每个工具的使用步骤、示例与边界。
字体对比 ↗
仅使用预设系统字体组合,浏览器选择已安装字体或通用后备字体。
示例:在同一设备上,使用相同标题与段落比较衬线与无衬线字体。
结果取决于本机字体及字形覆盖;英文使用首选字体时,中文仍可能使用后备字体。
字号层级 ↗
第 n 级字号 = 基础字号 × 倍率的 n 次方,px 与 rem 使用明确输入的根字号换算。
示例:16 px 基础、1.25 倍率,会得到 20、25、31.25、39.0625 px。
生成层级用于开始设计,不保证所有屏幕与语言的可读性。
行距与字距 ↗
行高为无单位数值,字距使用 em,栏宽使用 ch 并限制为响应式最大宽度。
示例:18 px 字号、1.6 行高,对应 28.8 px 行框,实际排版还受字体影响。
ch 对应字体数字 0 的宽度,并不精确代表每行字数,尤其是中日韩文字。
CSS 导出 ↗
配方把预设字体、字号层级与间距组合到固定的 .type-recipe 类中。
示例:下载 CSS,为内容容器添加 .type-recipe 类,再在实际设计中核对。
CSS 不含字体下载或全站重置,配置仅保留在页面内存,需导出后保存。
本机工作与明确边界
每个工具注明输入和文件上限,导入先校验格式再确认替换。纯文本按文字显示,不作为标记执行。中英文共用相同功能,根目录始终是英文,中文位于 /zh/。