在 Illustrator 里看起来正常的文字,导出 SVG 后在浏览器、微信、Figma、或客户电脑上可能出现:字形变形、字距变化、字体被替换、甚至整段文字消失。根因通常不是“导出坏了”,而是字体可用性与渲染引擎差异导致的。
打开导出的 SVG(用代码编辑器或浏览器查看源代码):
如果看到
如果主要是
适用:品牌 LOGO、标题字、海报主视觉等,优先保证视觉一致。
操作建议:
1)复制一份源文件用于交付;
2)选中文本 → 文字 > 创建轮廓(转曲);
3)导出 SVG(建议勾选保持编辑功能关闭,减少冗余)。
注意:转曲后就无法改字了,务必保留可编辑版本(含字体信息)。
适用:网页图标、可搜索文字、需要复制/无障碍的场景。
做法要点:
1)尽量使用 Web 常见字体或项目已引入的字体;
2)给设计稿/交付说明中写清字体名称、字重(如 Regular/Medium/Bold);
3)为不可控环境准备回退字体(同风格同字宽更稳)。
如果客户环境无法安装字体,这个方案风险会明显上升。
适用:既要客户后续能改字,又要当前展示不出错。
建议交付包:
1)可编辑版:AI/PDF(保留文本,不转曲);
2)展示版:SVG 转曲/或 PNG(确保任何设备显示一致)。
1)避免过度使用效果(描边外观、混合、变形等),必要时先扩展外观;
2)检查单位与视口:导出后在浏览器缩放测试,避免因小数精度导致的细微偏差;
3)导出前把文本对齐方式(左/中/右)确认好,避免不同渲染器对字距处理差异放大。
如果优先绝对一致:选方案 1(转曲)。如果优先可编辑与语义:选方案 2(保留文本并规范字体)。大多数商业交付更推荐方案 3:两份文件同时给,沟通成本最低。