01
Roboto
源字号 96 PX
正在加载字体并绘制路径…
- 画布
- —
- SVG 大小
- —
- 字符
- —
最多 40 个字符；单行方便比较宽度与细节。
实时字体比较
同一段文字，同一预览比例。
3/4 款字体
左右滑动，比较所有字体。
02
Montserrat
源字号 96 PX
正在加载字体并绘制路径…
- 画布
- —
- SVG 大小
- —
- 字符
- —
03
Playfair Display
源字号 96 PX
正在加载字体并绘制路径…
- 画布
- —
- SVG 大小
- —
- 字符
- —
每项预览均在浏览器内使用所选字体文件生成。遇到缺字时，该字体的预览和下载会停用，避免出现方框字形。文件大小指下载的 SVG，不是字体文件。
场景对比
从具体设计任务开始
选择案例后，上方工具会载入对应文字、字体和字重，并在浏览器中生成实际的 SVG 路径与数据。你可以继续调整。
01 / 标题设计
比较文字
BRAND
同一个词，三种标题气质
用相同的英文单词，对比几何无衬线、衬线和窄体展示字体的实际轮廓。
Montserrat · 700Playfair Display · 700Bebas Neue · 400
重点看： 文字宽度、字母间距和字腔形状。
02 / 界面文案
比较文字
Save & continue
按钮文字是否清晰、占位合适
把同一句英文按钮文案放进三款无衬线字体，比较字形和导出后的画布宽度。
Roboto · 400Inter · 400Lato · 400
重点看： 小写字母的辨识度，以及整句文字的占位。
03 / 数字与符号
比较文字
2026 / SVG
同一组数字，不同徽章气质
用三种风格比较年份和短标签，所选字体均支持案例中的字符。
Inter · 700Playfair Display · 700Bebas Neue · 400
重点看： 数字造型、斜杠形状以及整组文字的占位。
三步上手
如何比较字体轮廓
各卡片使用同一段文字，才能看出字体文件和字重带来的实际差异。
- 01
输入要使用的文字
输入标志文字、按钮文案或短句。如果作品包含中文、日文或特殊字符，也把它们一起输入。
- 02
选择 2–4 款字体
分别调整字体和字重。所有路径以 96 px 字号生成，预览使用同一坐标范围。
- 03
核对后下载
对照字形、画布尺寸、SVG 大小和缺字情况，再下载适合设计稿的版本。
结果解读
这些数据分别代表什么
并排预览用于观察相对差异；下方数据对应每款字体单独下载的 SVG。
统一预览比例
当前卡片共用一个 viewBox，便于直接比较宽窄和字形。下载时，每个 SVG 会按自己的路径范围裁出画布。
画布尺寸
宽和高是导出 SVG 的像素尺寸，包含路径周围少量留白。同一句文字在不同字体中可能占据不同宽度。
SVG 文件大小
这里显示生成的 SVG 文件体积，不是字体文件大小。路径更复杂可能使文件变大，但不能仅凭大小判断字体好坏。
字符支持
缺字提示依据字体字符表（cmap）判断。缺字字体的预览和下载会停用；请选择包含全部所需字符的字体。
字体比较常见问题
1下载的 SVG 也使用相同的 viewBox 吗？
下载的 SVG 也使用相同的 viewBox 吗？
不是。页面预览共用一个 viewBox，方便比较；每个下载文件会根据自身字形路径设置画布，并留出少量边距。
2同样是 400 字重，为什么看起来粗细不同？
同样是 400 字重，为什么看起来粗细不同？
字重名称由各字体家族分别定义。即使都标为 400，笔画形状和视觉粗细也可能不同，请以实际轮廓为准。
3SVG 文件越小，字体就越好吗？
SVG 文件越小，字体就越好吗？
不是。文件大小反映这段文字生成的路径数据量。选字体时应先看字形和字符覆盖，再把文件体积作为实际使用时的参考。
4可以比较中文、日文等非拉丁文字吗？
可以比较中文、日文等非拉丁文字吗？
可以。请输入作品中实际要用的字符，并逐项查看缺字提示。不同字体、不同文件的字符覆盖范围会有差别。
5导出的 SVG 需要安装原字体吗？
导出的 SVG 需要安装原字体吗？
不需要。下载文件保存的是字形路径，不是可编辑文字；接收文件的人无需安装原字体也能显示这些形状。