跨浏览器字体粗细渲染

Question

Sorts Mill Goudy 是一款外观精美的字体，在 Chrome 上呈现精美。

但是，它似乎没有原生的粗体字。 （不过，它确实有斜体。）

所以，我认为如果字体粗细设置为粗体，则由浏览器应用“仿粗体”。

事实证明，不同的浏览器应用这种“仿粗体”的方式非常不同。就 Chrome 而言，它在 800 字体粗细下看起来很棒，但 Safari 和 Chrome 并没有采用相同的方法。他们显然正在尝试做一些事情来使其更大胆，但没有像 Chrome 那样做。结果让人想起了试图排版自己的 unicode 前外语编码......每个字母似乎有点太宽了，而且感觉“不妥”，尤其是与 Chrome 处理它的方式相比。

这里发生了什么？有没有办法将 Chrome 的 faux-bold 导出为字体文件（ttf 或其他），并强制其他浏览器效仿？

如何在此处实现跨浏览器一致性？

<link href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap" rel="stylesheet">
<style>
h1
{
  font-family: "Sorts Mill Goudy";
  font-weight:400;
  font-size:3em;
  text-align:center;
}

h1.b
{
  font-weight:800;
}
</style>
<h1>Test Text: Font-weight 400</h1>
<h1 class="b">Test Text: Font-weight 800</h1>

Codepen：https://codepen.io/1bc25a/pen/oNWOQoL

Image: Side-by-side font renderings

Answer 1

恐怕这里发生的实际上是每个浏览器都在做自己的字体渲染。如果您在 Edge 中进行测试，情况可能会变得更糟。每个浏览器似乎都采用自己的方法来呈现字体粗细和抗锯齿。因此，由于您在某处找不到本地粗体面孔，因此您可能无能为力：/

您并不孤单，您可能会感到欣慰，您可以在此处看到：https://blog.stephaniestimac.com/posts/2020/06/browser-fonts/

记住 Berners-Lee 先生从一开始就知道这些新型页面将显示在各种设备上可能会有所帮助，因此 HTML 和 CSS 都是关于从设计师手中夺走控制权并给予将其发送给渲染设备或用户。

您可能会尝试通过检测浏览器并为它们提供不同的字体粗细来尝试破解一下，但我不知道这是否会使事情变得更好，而且我很确定这可能不值得。

对不起，我担心这不是你想要的答案......