为何SVG文本在Edge与Firefox中显示宽度差异明显？

问题复现代码 #

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="340"
   height="275"
   viewBox="0 0 256 206"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
    <rect x="0" y="113" width="256" height="22" style="fill:#a9e780" />
    <text x="15" y="127" style="font-size:8px;font-family:'Verdana'">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</text>
</svg>

显示差异现象 #

• Microsoft Edge：文本宽度适配下方绿色矩形，显示正常
• Firefox：文本宽度超出绿色矩形，显示过宽

差异原因 #

核心是不同浏览器的SVG文本渲染逻辑存在区别：

1. 字体匹配差异：Edge和Firefox可能加载了不同版本的Verdana字体（系统预装版/浏览器内置 fallback 字体），不同版本的字符宽度本身有差异
2. 渲染引擎算法差异：基于Chromium的Edge和基于Gecko的Firefox，在计算文本宽度时，对字体度量、字距调整的处理逻辑不同
3. 视口缩放精度差异：SVG的width/height与viewBox设置了缩放比例，不同浏览器在缩放文本时的精度处理不一致

可行解决方案 #

1. 嵌入统一Web字体

通过@font-face引入指定版本的Verdana字体文件，确保所有浏览器使用完全相同的字体，从根源消除字体差异：

<svg
   width="340"
   height="275"
   viewBox="0 0 256 206"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
    <defs>
      <style type="text/css">
        @font-face {
          font-family: 'Verdana';
          src: url('verdana.woff2') format('woff2');
          font-weight: normal;
          font-style: normal;
        }
      </style>
    </defs>
    <rect x="0" y="113" width="256" height="22" style="fill:#a9e780" />
    <text x="15" y="127" style="font-size:8px;font-family:'Verdana'">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</text>
</svg>

2. 强制文本宽度

给<text>标签添加textLength属性，指定文本的目标宽度，让Firefox强制适配该宽度，同时用lengthAdjust="spacing"保证只调整字符间距、不拉伸字符：

<text x="15" y="127" style="font-size:8px;font-family:'Verdana'" textLength="226" lengthAdjust="spacing">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
</text>

（注：textLength的值可根据Edge中显示的实际文本宽度调整）

3. 更换跨浏览器一致的字体

使用system-ui这类系统默认无衬线字体，各浏览器对这类字体的渲染差异远小于第三方字体：

<text x="15" y="127" style="font-size:8px;font-family:system-ui">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
</text>

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