时间戳

首页 > 解决方案 > 跨浏览器字体粗细渲染

css - 跨浏览器字体粗细渲染

问题描述

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

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

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

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

这里发生了什么？有没有办法将 Chrome 的仿粗体导出为字体文件（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

图片：并排字体效果图

标签： cssfontscross-browsergoogle-fonts

解决方案

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

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

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

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

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

推荐阅读