无衬线 字体生成器

Inter 字体转 SVG 在线工具

将 Inter 文字转成 SVG,制作紧凑的界面标签、仪表盘图形和科技品牌字标,让数字与短文案自然融入产品界面。 下方已选好 Inter,输入文字并调整参数后即可导出 SVG、DXF 或 React 组件。

文本选项
预览
输入文本查看预览
SVG 选项

微调导出单位、填充行为和描边输出。

输出

字体样本Product Label / 500

字体特点与使用建议

关于 Inter

适用场景

  • 产品界面图形
  • 仪表盘标签
  • 数据标注
  • 科技字标

Inter 适合产品标签、仪表盘图形和简短的科技品牌字标。它的字形比较克制,数字和短句容易融入现有界面。转成 SVG 适合固定不变的图形资产;经常更新的数值、多语言提示和长段落,则应优先考虑保留为普通文字。

字形观察重点

把真实的数字、斜杠、小数点和单位一起放进预览。一个放大的品牌名,不能说明小尺寸数据标签是否清楚。请按界面中的最小显示尺寸和实际背景检查。粗字重配合过紧的字距,会让整行显得很密,即使单个字母还勉强可辨。

分类
无衬线
可变字体
是
斜体支持
是
可用字重
100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900

同样文案 · 相同尺度

Inter 字形对比

这组仪表盘金额让逗号和小数点也参与比较,两款字体均为 500 字重。请按实际尺寸查看标点;固定样例不能验证动态数值或等宽数字对齐。

对比文案: Total 1,024.50

Inter · 500

72 px 字号下的排版宽度:488.4 px

Inter 500 字重的路径样例:Total 1,024.50

Roboto · 500

72 px 字号下的排版宽度:465.4 px

Roboto 500 字重的路径样例:Total 1,024.50

这组文案中,Inter · 500 的排版宽度比 Roboto · 500 多 4.9%。

对比如何生成与测量

两份样例均由内置字体目录中的文件生成:字号 72 px,开启字偶距与标准连字,额外字距和描边均为零。两行使用相同的坐标尺度与基线,小屏幕下也按同一比例缩小。宽度指包含字符间距的排版推进宽度,不是可见轮廓的包围盒。结果只适用于这些字体文件和这组文字;相同字重数值不代表视觉粗细相等。此处用于比较版面占用,不是易读性评分或加工测试。

Inter 字重与间距建议

回到转换器调整
标签字重
500
标题字重
700
字符间距
-0.01em 至 0
曲线精度
中

这些设置用于开始比较字形,请用实际文案和最终尺寸调整。加工极限取决于工艺、材料与刀具;上方的字体对比不能代替材料试做。

字重与字距怎么调

界面标签可从 500 开始,紧凑字标或重点提示可试 700。开启字偶距,大小写混排先使用接近默认的间距。大标题可以逐对微调,但不要直接套到所有小标签上。准备选择 800、900 之前,先比较放大尺寸或缩短文案能否保留更清楚的字腔。

Inter 文字转 SVG:界面图形与导出

设计软件与网页图形可选 SVG,兼容的 CAD 工作流可选 DXF,React 项目可下载 JSX、TSX 路径组件。请按目标软件选择格式。

SVG / JSX / TSX

用于网页与设计软件

仪表盘示意图可把固定列名和产品字标转成路径,实时数值保留为文字。检查逗号、小数点、百分号和最长数值;路径导出不会把静态图形变成可更新的数字组件。

SVG / DXF

用于切割与雕刻

小型控制标签的材料测试应包括单位和最小的小数点。按实际数值比较 500 与 700;数字变粗时,标点周围的空间也可能更紧。

下载前检查

  • 界面标签先试 500,紧凑字标和重点提示可比较 700。
  • 大小写混排保留接近默认的字距,逐对检查特殊组合。
  • 把数字、小数点和单位放进预览,按真实界面尺寸检查。

用最终标签比较 500 和 700,连同数字和单位一起检查最小显示尺寸。保留原始文案和可访问说明。实体加工时再确认小标点、字腔固定方式及成品单位。

Inter 转 SVG 常见问题

1

哪些产品图形适合用 Inter 转 SVG?

固定的仪表盘标签、图示和简洁产品字标都适合尝试。Inter 比较容易与界面元素协调,但仍需检查真实的数字、单位和标点。经常变化或需要多语言切换的界面文案,保留为普通文字更便于维护。
2

Inter 转 SVG 时选 500 还是 700?

一般标签可从 500 开始,紧凑字标和重点提示可试 700。大小写混排先使用自然字距,并以最小显示尺寸比较。很小的图形不要只靠更粗的字重补救,否则字腔和标点可能挤在一起。
3

Inter 的价格文字转成 SVG 后,数字会自动等宽对齐吗?

不会。路径导出只保留当前字形与间距,不会额外建立等宽数字排版。请把 1,024.50、8,888.88 等实际数值放入目标列检查。经常变化的价格和仪表盘数字,通常保留为普通文字更方便控制对齐。
4

Inter 仪表盘数字适合下载成 JSX 组件吗?

固定图示标签或产品字标可以使用 JSX、TSX 路径组件;实时总额、百分比和状态则建议保留为文字。导出的 React 组件保存的是轮廓坐标,修改一个文字属性不会自动重新生成 Inter 字形。
5

Inter 和 Roboto 用于紧凑标签时,应该怎样比较?

下方固定了文案、字号和字重,可一起观察小数点、千位分隔符及整行宽度。还应输入项目中最长的数值和实际单位;短金额放得下,不代表更长的仪表盘标签也不会拥挤。
6

Inter 适合激光切割或雕刻吗?

Inter 可用于清晰的设备雕刻标签,但数字和小标点要和字母一起检查。镂空切割中的封闭字腔需要桥位或背板。导出后在加工软件中核对单位,再测试实际材料能保留的最小细节。
Inter 字体转 SVG 在线工具|免费预览与导出