SVG转PNG时字体缺失导致的渲染差异

SVG文字为何依赖本机字体

SVG转PNG时出现字体缺失，问题通常不在PNG分辨率，而在文字布局阶段使用了不同字体。SVG 1.1和SVG 2都支持用<text>元素保存字符内容，再通过font-family等属性请求字体；文件本身未必包含对应的字形数据。

font-family指定字体家族，font-weight指定字重，font-style指定正常、斜体等样式。渲染器会根据这些条件匹配本机字体；目标字体不存在、名称不匹配，或缺少Bold、Italic等变体时，就会沿着字体回退链选择替代字体。

• 未安装请求的字体，回退到系统默认字体。
• 只有Regular却请求Bold时，渲染器可能模拟加粗，或改用另一套粗体。
• 字符不在字体覆盖范围内时，可能显示方框、替代符号，或逐字切换到其他字体。

浏览器、操作系统和转换工具使用的字体环境并不相同。Windows、macOS、Linux，以及没有桌面字体的容器，可能为同一份SVG选择不同字体；ImageMagick、librsvg、Sharp和带Chromium的工具，对CSS字体加载与回退的支持也不完全一致。

替换字体会改变字符宽度、字形边界、基线和行高，长文本还可能改变换行位置。因此，同一份SVG在本机浏览器中正常，用SVG转png工具导出后却出现标题偏移、按钮文字溢出或表格错位，并不罕见。

字体缺失如何改变PNG渲染结果

SVG转PNG通常要经过“解析SVG—查找字体—布局文字—栅格化输出”几个步骤。字体差异主要发生在布局文字阶段，之后即使输出分辨率完全相同，PNG中的文字位置也可能不同。

• 中文字体回退后，笔画比例和字符宽度发生变化。
• 请求粗体但没有粗体文件时，字重可能变轻，也可能由渲染器模拟加粗。
• 请求斜体但缺少斜体变体时，渲染器可能倾斜普通字形，倾斜角度和边界不一定与真实斜体一致。
• 字体不包含某个字符时，可能出现方框或替代符号。

字体度量信息会直接影响字符宽度、字距、行高、字形边界和基线。标题、按钮、表格等固定尺寸区域最容易暴露问题：标题可能换行，按钮文字可能被裁切，中文和英文混排时基线也可能不齐。

不要把DPI和像素尺寸混为一谈。若输出宽度为1200px、高度为630px，PNG的像素尺寸由这两个参数决定；DPI元数据设置为96或300，并不必然改变已经指定的像素宽高，具体取决于工具参数和实现。

转路径化如何固定文字外观

“转路径”是把文字字形转换成SVG的<path>轮廓。转换后，文件通常不再依赖目标机器是否安装原字体，PNG渲染器只需绘制路径即可。

这种方式适合Logo、海报标题、图标文字、印刷稿，以及要求像素级复现的静态图片。它不适合需要复制、搜索、无障碍阅读或动态修改文案的内容，因为路径不再保留普通文本语义。

关键顺序不能颠倒：转路径前必须让正确字体可用。可以在安装了目标字体的设计软件、构建机或容器中完成路径化，也可以使用字体嵌入机制携带字体数据。若字体已经缺失并发生回退，路径化只会把错误的替代字形固定下来。

路径化还会增加SVG节点数量和文件体积。复杂字体、长文本或多语言内容可能增加解析时间，实际项目可采用“静态短文本转路径、正文保留文字”的策略。

• 保留文本：可编辑、可搜索、可访问，但依赖字体环境。
• 嵌入字体：兼容性较好，但要处理字体授权、文件体积和工具支持。
• 转路径：外观稳定，但可编辑性、可搜索性和可访问性较差。

建立稳定的SVG转PNG流程

1. 固定转换环境，记录操作系统、字体文件、转换工具及版本。在构建环境或容器中安装同一字体，并锁定ImageMagick、librsvg或Sharp的版本。
2. 转换前检查字体。确认CSS中的字体名称与字体文件内部名称一致，检查Regular、Bold、Italic等变体，以及中文字符覆盖范围。不能只安装Regular，却在SVG中请求font-weight:700。
3. 固定输出参数，例如统一输出为1200×630 px，指定背景色、透明通道和PNG格式；DPI单独作为元数据处理，不用它替代像素尺寸设置。
4. 对导出结果做视觉或像素级回归，比较文字边界、换行、裁切、基线和透明背景。若目标环境无法保证字体，先用正确字体把关键标题转为路径，再进行PNG转换。
5. 需要交付可编辑或可检索文字时，保留<text>并嵌入字体或随项目分发字体文件，同时核对字体授权。

可在转换前分别测试浏览器、ImageMagick、librsvg和Sharp的结果；同名工具在不同版本或底层渲染库下也可能表现不同。站内的SVG转png工具适合快速