SVG / JSX / TSX
用于网页与设计软件
设备示意图中，可把固定的 Roboto 标签与动态测量值分开。用完整编号连同单位、斜杠和标点检查；需要复制的编号保留可选文字，只把固定图示部分转成路径。
无衬线 字体生成器
Roboto 字体转 SVG 在线工具
在线将 Roboto 文字转成 SVG 路径，制作清晰的界面标签、技术图示和产品字标，保留中性、开阔的字形特点。 下方已选好 Roboto，输入文字并调整参数后即可导出 SVG、DXF 或 React 组件。
文本选项
预览
输入文本查看预览
SVG 选项
微调导出单位、填充行为和描边输出。
输出
字体样本UI SYSTEM / 500
字体特点与使用建议
关于 Roboto
适用场景
- 界面标签
- 技术图示
- 产品字标
- 图标旁文字
Roboto 适合界面标签、技术图示和简洁的产品字标。把使用 Roboto 的文字转成 SVG 路径后，字形可以在网页和设计软件之间保持一致，适合固定不变的图形文字。如果希望标题本身更有装饰性，或版面特别狭窄，可以先比较展示字体或窄体，而不是不断给中性字形叠加效果。
字形观察重点
用实际文案检查 a、e、g 等小写字母，以及数字、单位和标点。大图上清楚的内部留白，缩小后可能挤在一起。不要只看一个放大的大写字母；应比较整行文字在最终尺寸下的效果。需要更醒目时，优先试较粗的原生字重，再考虑描边。
- 分类
- 无衬线
- 可变字体
- 是
- 斜体支持
- 是
- 可用字重
- 100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900
同样文案 · 相同尺度
Roboto 字形对比
用同一组设备标签文字比较 Roboto 与 Inter 的 500 字重。除了整行宽度，也看数字 0、冒号和斜杠，再把实际编号放入图示中检查。
这组文案中，Roboto · 500 的排版宽度比 Inter · 500 少 5.4%。
对比如何生成与测量
两份样例均由内置字体目录中的文件生成：字号 72 px，开启字偶距与标准连字，额外字距和描边均为零。两行使用相同的坐标尺度与基线，小屏幕下也按同一比例缩小。宽度指包含字符间距的排版推进宽度，不是可见轮廓的包围盒。结果只适用于这些字体文件和这组文字；相同字重数值不代表视觉粗细相等。此处用于比较版面占用，不是易读性评分或加工测试。
Roboto 字重与间距建议
回到转换器调整- 标签字重
- 500
- 标题字重
- 700
- 字符间距
- 0 至 0.01em
- 曲线精度
- 中
这些设置用于开始比较字形，请用实际文案和最终尺寸调整。加工极限取决于工艺、材料与刀具；上方的字体对比不能代替材料试做。
字重与字距怎么调
界面标签可从 500 字重开始，短字标和重点提示可试 700。开启字偶距（Kerning），大小写混排时先保留接近默认的字距。整行太挤时，优先精简文字或调整尺寸，不要直接使用很大的负字距。细字重需要更大的输出，特粗字重则要留意字腔是否堵住。
Roboto 字体转 SVG：导出与使用
设计软件与网页图形可选 SVG，兼容的 CAD 工作流可选 DXF，React 项目可下载 JSX、TSX 路径组件。请按目标软件选择格式。
SVG / DXF
用于切割与雕刻
做雕刻设备牌时，测试最小数字和标点，不要只看主标题。镂空编号还需检查 0、B、R 等封闭区域，确定字腔中心如何固定。
下载前检查
- 小型标签先比较 500 和 700，按最终尺寸查看字腔。
- 优先选择合适字重，不要仅靠粗描边让文字变厚。
- 保留字偶距，并检查数字、单位和标点之间的间隙。
用最终文案比较 500 和 700，检查字腔、标点与字距，并记录字体和字重。实体加工前确认成品单位、字腔固定方式和最细连接，先做一小段测试。
Roboto 转 SVG 常见问题
1Roboto 适合做 SVG 界面标签和产品字标吗？
Roboto 适合做 SVG 界面标签和产品字标吗？
适合。它的字形比较克制，适合固定的界面标签、图示注释和简洁字标。请把实际文案、数字一起缩到最小显示尺寸检查。经常修改或需要翻译的界面文字，通常保留为普通文本更方便。
2Roboto 转 SVG 推荐用哪个字重？
Roboto 转 SVG 推荐用哪个字重？
界面标签可从 500 开始，短字标和重点提示可试 700。开启字偶距，并检查 a、e 等字母内部是否仍有足够留白。需要更粗时，先比较原生字重，再考虑添加描边。
3用 Roboto 做设备编号，怎样检查容易混淆的字符？
用 Roboto 做设备编号，怎样检查容易混淆的字符？
把实际编号中的 O、0、I、l 和 1 放在一起，按标签的最终尺寸查看。转成路径会保留原来的字形，不会自动让相似字符变得更容易区分。需要复制编号的界面，应另外保留可选中的文字。
4经常变化的 Roboto 状态文字，也适合转成 SVG 吗？
经常变化的 Roboto 状态文字，也适合转成 SVG 吗？
固定不变的 SIGNAL 等标签可以转成路径；状态、时间和测量值则通常保留为普通文字更方便。制作设备示意图时，可将固定标签与动态数值分开，避免每次更新数据都重新生成整张图。
5什么时候该用 Roboto Condensed，而不是压缩 Roboto？
什么时候该用 Roboto Condensed，而不是压缩 Roboto？
面板宽度受限时，可以用同样字号比较完整文案。Roboto Condensed 的窄体字形比横向压扁普通 Roboto 更值得尝试；压缩整张 SVG 会同时改变字腔和笔画比例。换成窄体后，仍要检查标点和较窄的空隙。
6Roboto 适合激光切割或雕刻吗？
Roboto 适合激光切割或雕刻吗？
可以尝试用于雕刻和刻字膜，但要先检查最终尺寸下的细连接与标点。镂空切割的封闭字腔需要桥位或背板；Roboto 本身不会自动提供这些支撑。请先用实际材料做小样。