图片处理实用指南

SVG转PNG后字体变了?font-family只是选字体,交付前这样核对

在SVG里写上字体名称,并不等于把字体文件放进图片。接收方没有该字体,或图像导出环境无法取得它时,文字可能使用后备字形。先用固定文字与画布的对照定位字体依赖,再决定交付可编辑文本、经批准的路径稿,还是已经验收的PNG。

旧式印刷作坊里装有金属活字的木质字盘
配图:Fabian Kleiser · Unsplash License活字印刷摄影配图,不是本例SVG、数字字体文件或软件运行截图。

先把问题解决

先保留可编辑原稿,核对授权字体与接收环境;用同尺寸对照检查字形、行宽和完整文字。当前SVG转PNG入口会解码SVG并画到画布,不会替你嵌入字体或把文字转成路径。需要固定外观时,在合适的编辑器中准备路径副本或交付已批准的栅格结果,同时另存原始文字。

字体名称是查找顺序,不是字体附件

SVG的font-family说明把它定义为按优先级排列的字体名称或通用字体族。文件中出现一个名字,只能说明请求使用它,不能证明导出设备具备它。

CSS字体选择说明还区分了后备字体和逐字形查找:某种字体能显示英文字母,不代表也包含每个汉字、货币符号或数学符号。因此,“整行换样”和“只有几个字符像方框”需要分别排查。

如果文字形状没变而图片里的照片消失,应转到SVG外部图片依赖对照。本篇只改变字体选择,不重复那份外链图片案例。

三份小样只改变一个字体列表

练习包是本站自编材料,不含客户标识或外部字体。三份SVG都为480×120,文字同为MWMW 2026,字号48、位置(20,82)、白底黑字。KitNelo NeverInstalled 73591是故意编造的不可用字体名,不是推荐安装的产品。

下面是missing-mono.svg的完整内容。第二份mono.svg只把font-family改成monospace;第三份missing-serif.svg把列表末尾改成serif。不要同时改字号、字距或输出尺寸,否则就无法把差异归因到这次控制变量。

可复制的缺失字体对照

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="120" viewBox="0 0 480 120"><rect width="480" height="120" fill="white"/><text x="20" y="82" font-size="48" fill="#101010" font-family="'KitNelo NeverInstalled 73591', monospace">MWMW 2026</text></svg>
原创SVG;没有脚本、外链图片或字体下载。

本例输入与应核对的关系
文件字体列表检查目的
missing-mono.svg'KitNelo NeverInstalled 73591', monospace缺失字体后是否使用等宽后备
mono.svgmonospace与上一份的解码像素比较
missing-serif.svg'KitNelo NeverInstalled 73591', serif改变后备字体后,字形是否改变

先验收真实PNG,再讨论换电脑的差异

本站当前实现把SVG作为图像解码后绘入PNG。按MDN的SVG图像环境限制,图像上下文和独立文档的资源加载条件不同。不要因为网页编辑器能加载某个网络字体,就承诺本地PNG转换会沿用该资源。

  1. 打开SVG转PNG,依次粘贴三份源码,每次点击“开始转换”。保留原文件名与对应下载名,避免三次converted.png互相覆盖。
  2. 每次点击“下载结果”,重新打开PNG,检查实际480×120像素、完整MWMW 2026、基线与右侧留白。不要用网页缩略图的显示宽度作为文件尺寸。
  3. 在同一导出环境比较missing-mono与mono,再比较missing-serif。若前两份一致而第三份不同,说明本组差异符合后备字体变化;它不能证明原设计字体已经嵌入。

本例在2026年11月3日的受控Windows Edge环境中核对原始下载:三份均为480×120;missing-mono与mono的解码像素一致,missing-serif不同。结论仅限这些材料和环境,不保证不同系统的通用字体外观一致,也没有测试外部字体服务。

要保留可编辑性,还是固定批准后的外观?

Inkscape文字说明介绍了文字转为路径后的形状编辑。这是可选路线的官方说明,不是本文运行过Inkscape的记录;转路径之前仍须确认字体使用和交付许可。

路径或PNG可以减少接收环境的字体依赖,却会牺牲文本编辑、查找或辅助阅读能力。对需要无障碍文本的发布,把正文另外作为可访问文字提供,不把一张图当作全部信息。

根据交付任务保留不同文件

继续编辑

保留含text的原稿,记录字体名称、授权与排版参照。接收方需要取得允许使用的字体,并重新校对换行与特殊字符。

固定矢量外观

在具备相应功能的编辑器中制作文字路径副本,并与批准稿比对。本站转换入口没有“文字转路径”按钮。路径不再是原来的可编辑文字,另存文本与可编辑原稿。

只需要固定像素图片

交付已经检查的PNG,写明像素和用途。PNG保留的是这一次栅格结果,放大不恢复矢量细节,接收方也不能直接编辑文字。

出现问题时,按症状回到原稿

画布或坐标问题可继续阅读SVG像素与viewBox检查。提高PNG宽度不能把缺失字体变成原字体,反复改变格式也不能纠正原文拼写。交付记录至少保留原稿、批准参照、导出环境与最终文件;接收方变更环境后应再验收。

不要把三类失败都当成“字体坏了”
症状先检查恢复动作
整行字形或字宽改变指定字体是否可用、后备顺序是否改变使用获准的字体环境重新排版,或批准路径/PNG副本
只有个别字缺失字体是否含对应字形,原文字编码是否正确核对原文字并选择支持字符的字体;不直接删除缺字
右边文字被截掉字宽变化后是否超出画布/viewBox修正构图边界并重新检查完整文字

常见问题

嵌入字体一定比转路径更好吗?

没有统一答案。是否允许嵌入要看字体许可与目标格式,导出环境也可能限制资源加载。需要继续编辑时优先保留可编辑原稿;需要固定外观时再比较路径或栅格副本的代价。

参考资料与延伸阅读

按步骤开始处理

进入对应工具,预览处理结果,检查导出的文件。

继续阅读