如何解决网页中SVG字体大小与常规HTML文本字号不匹配问题

问题核心成因 #

1. SVG单位换算错误
   你提供的SVG根节点使用毫米作为宽度单位，viewBox未与像素单位做匹配：按浏览器默认96DPI换算，1mm≈3.78px，167mm宽的SVG对应实际渲染宽度约631px，但viewBox宽度仅为167，相当于SVG内1单位对应实际渲染的3.78px。你在Inkscape中设置的22.4px字号导出后仅为7.9px，经过缩放后实际渲染字号约为29.8px，自然比HTML的22.4px更大。
2. 字体资源不匹配
   你引入的字体仅包含Open Sans Condensed的300字重，但CSS中设置的font-weight为400，浏览器会对细字重做伪加粗处理；同时你用img标签加载SVG，SVG作为独立文档无法继承父页面加载的字体，若本地没有安装对应字体会触发 fallback，进一步放大字号差异。另外SVG的tspan节点残留了Inkscape生成的Times New Roman字体说明，也可能造成渲染异常。

解决方案 #

• 调整Inkscape导出配置：打开文档属性将画布单位统一改为px，导出SVG时选择优化模式，删除所有Inkscape专用属性、冗余元数据，尤其要清理tspan节点内的Times New Roman残留配置，直接将SVG内文本字号设置为22.4px。
• 优先使用内嵌SVG：不要用img标签加载SVG，直接将SVG代码复制到HTML对应位置，SVG会继承父页面的字体、颜色等样式，无需单独处理字体加载问题，也能保证渲染一致性。
• 修正字体配置：如果要保留400字重，引入字体时增加400字重的加载配置，同时将HTML和SVG内的font-weight统一为相同值，避免伪加粗导致的大小差异。如果必须使用img标签加载SVG，需要将Open Sans Condensed字体转成base64格式，内嵌到SVG的<style>节点中，保证SVG能加载到正确字体。
• 固定SVG缩放规则：给SVG根节点添加preserveAspectRatio="xMinYMin meet"属性，给包裹SVG的标签设置和文本容器一致的固定宽度，不要用auto属性，避免缩放比例波动。

内容的提问来源于stack exchange，提问作者user7420124