系统优先字体配对生成器

字体搭配画廊

在无需等待远程字体文件的情况下,构建可靠的标题和正文组合。按氛围、对比度和使用场景进行过滤,然后为您选择的布局复制纯净的 CSS 变量。

  • 跨主要操作系统的实用系统字体栈,降级平稳。
  • 提供标题文案、正文文案、缩放和行高的实时预览控件。
  • 适用于快速原型、文档网站和产品界面的生产就绪 CSS 输出。
  • 关于每种配对最佳适用场景及其对比度的说明。

生成配对组合

修改过滤器或预览文本,然后渲染新的画廊。空字段和超出范围的值将在更新前进行修正。

最多 90 个字符。HTML 将被视为纯文本。

20 到 280 个字符。渲染前会规范化空格。

42px
18px
1.55

仅显示系统字体配对。结果从您浏览器的本地数据更新。

舍入:标题和正文大小使用整数像素;行高使用两位小数。

假设:本地系统字体的可用性因设备而异。 导出的每个 CSS 块中都保留了后备顺序。 在发布品牌排版前,请先进行最终设备测试。

配对画廊

每张卡片预览相同的文案,以便您直接比较语调和层次结构。

0 个配对

工作原理

此生成器使用一组精心挑选的实用系统字体栈配对数据集。它会根据您选择的意图筛选集合,应用预览设置,并提供 CSS 变量以便快速交付。

1

选择设计语境

使用场景、氛围和对比度会缩小列表范围。如果没有匹配项,工具将回退到完整数据集,而不会留下空白屏幕。

2

调整阅读节奏

标题大小、正文大小和行高都会被安全地限制在合理范围内。这可以保持预览的可读性,并防止导出无效的 CSS。

3

比较并复制

每个结果都包含字体栈名称、font-family 声明和一个复制按钮。导出的 CSS 使用变量,因此您可以快速将其放入设计令牌文件中。

4

在目标设备上确认

系统字体栈是可靠的,但渲染效果仍会因浏览器、操作系统、抗锯齿设置和可用的本地字体而异。请将此画廊视为快速入围名单,而非最终的 QA 环节。