求助：Safari与Chrome中文本渲染偏移/缩放不一致的像素级对齐问题

大家好，我遇到了一个跨浏览器文本渲染的像素级对齐难题，试了各种排查思路还是没找到解法，来请教下各位大佬！

我做了一个小示例：用红色线条给文本「Hello」做了精准的包围框，在Chrome（Linux、Mac版本都试过）上，红色线条和文本贴合得严丝合缝，完全对齐。但一换到Mac上的Safari，这些线条就跟文本错开了——不光垂直方向有偏移，水平方向也对不上。

我观察到几个关键细节：

• 这个问题不是所有字体/字重都存在：大部分字体在两个浏览器上都能做到像素级对齐，但像我用的Audiowide字体+900字重就触发了这个问题
• 一开始怀疑是字体升部/降部（ascenders/descenders）或者行高导致，但水平方向也有偏差，行高的可能性就排除了

下面是我用的代码（注：修正了原代码里的一个标签闭合错误，原代码把<div class="root">的闭合标签写成了</span>）：

CSS 代码 #

* { 
  font-family: "Audiowide"; 
  font-weight: 900; 
} 
.root { 
  transform-origin: top left; 
  scale: 15;
} 
span { 
  background: red; 
  position: absolute; 
  opacity: 0.3; 
  &.horizontal { 
    width: 50px; 
    height: 1px; 
  } 
  &.vertical { 
    width: 1px; 
    height: 20px; 
  } 
}

HTML 代码 #

<div class="root">
  <span class="horizontal" style="transform: translateY(2.8px);"></span>
  <span class="horizontal" style="transform: translateY(16.2px);"></span>
  <span class="vertical" style="transform: translateX(0px);"></span>
  <span class="vertical" style="transform: translateX(44.4px);"></span>
  Hello
</div>

<!-- 字体引入 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">

现在的核心疑问是：有没有什么可靠的方法，能让不同浏览器（尤其是Safari和Chrome）对文本的渲染做到像素级一致，保证线条和文本的精准对齐？

内容来源于stack exchange