Inter 设计与 SVG 导出指南
这份指南帮助你在实时预览之外判断 Inter 是否真的适合项目，覆盖字形观察、间距选择、屏幕集成和实体加工风险，让下载结果不只是格式正确，而是能直接进入下一步工作流。
字体背景与适用项目
Inter 从一开始就为计算机界面设计，高 x 高、紧凑而清楚的间距、易识别的标点都体现了这一目标。作为 SVG 字体，它最擅长把文字变成产品资产，而不是装饰性插画。仪表盘标签、界面流程图、发布物料和紧凑的科技字标可以共享同一套视觉语言。把最终标签转为路径，还能消除截图、邮件安全图片和组件库中的字体加载不确定性。
字形中应重点检查什么
Inter 的安静感来自没有哪个字母刻意抢镜，但细节足以让密集信息保持可读。较高的小写字面使小标签看起来比名义字号更大；当粗字重和紧行距叠加时，这个优势也可能变成过重的灰度。不要只检查示例单词，还要看标点、数字与大小写混排。产品 SVG 常包含版本号、百分比或单位，这些字符是否对齐，直接决定资产是否显得专业。
Inter 推荐起始设置
以下数值是实用起点，不是万能预设。请用真实文案、最终尺寸、材料与目标软件复检。
- 标签字重
- 500
- 展示字重
- 700
- 字符间距
- -0.01em to 0
- 曲线精度
- 中
- 建议最小起点
- 12 px / 3 mm
字重与间距策略
多数 UI 标签从 500 开始，紧凑提示或科技字标可用 700。大小写混排通常不需要正字符距，大尺寸标题可以尝试轻微负字距，但必须逐对检查。保持字偶距开启。如果密集标签显得拥挤，先放大真实尺寸或缩短文案，不要直接跳到 800、900。可变轴适合寻找精准视觉重量，但交付时仍应导出最终选定的轮廓，让下游工具获得稳定几何。
网页、React 与屏幕工作流
Inter 特别适合 React 和设计系统资产。导出紧贴图形的 viewBox，把 fill 改为 currentColor，并在需要响应式时使用 CSS 尺寸而非固定像素属性。路径文字无法被选择、翻译或直接朗读，所以要用 aria-label 或相邻 HTML 保留语义。动画时移动整个词通常比拆分每个字符更流畅、成本更低。还应在 1x 与 2x 显示密度下检查基线和视觉重量。
激光、CNC、刻字膜与雕刻
虽然 Inter 优先面向屏幕，中粗字重同样可以稳定雕刻或切割。建议用 700，避免过小成品，并在计入切缝后检查方正连接和封闭字腔。它适合设备标签与现代导视，却不天然适合模板切割；制作独立字母时，要主动添加桥位或单独固定内部结构。精细激光雕刻中，500 往往比 800 保留更多内部细节，同时仍有足够可读性。
何时选择或避开 Inter
Roboto 更熟悉也更机械，Open Sans 更宽、更友好，Montserrat 则有更强的展示个性。SVG 属于数字产品系统并需要与界面排版对齐时，Inter 是好选择；历史、奢华、 playful 或手作主题则不适合，克制会被误读为缺乏设计。Inter 也很容易被过度使用，正式品牌字标应通过精细间距、构图或独立符号建立差异，而不是只靠默认字体轮廓。
Inter 下载前复检
用真实标签及其中的数字、标点分别预览 500 与 700。在组件真实宽度检查基线，并在路径之外保留语义标签。只有确实需要继承主题时才使用 currentColor。实体制作要在物理单位复核字腔和连接。把原始文案、字体字重与 viewBox 尺寸同组件一起记录，避免下一次修改从猜测开始。