Safari 与 Chrome 字体渲染

Question

我目前正在做一个有导航的项目。 现在对于一些动画，我需要字体/字母在每个浏览器（Chrome、Firefox、Safari、Edge）上都能完美显示像素。

但现在当我看到 Safari 将字母显示在最顶部时，我感到震惊，就像您在此处看到的那样：

在 Chrome 中，字体被正确呈现为垂直对齐在中心。 您可以看到的两条白线只是 li 的 ::after 元素。

我的 HTML 如下所示：

<ul>
  ...
  <li>
    <a href="...">News</a>
  </li>
  ...
</ul>

我已经尝试过使用垂直对齐属性。但没有成功。 有什么解决办法吗？我需要它们始终以相同的方式呈现。

Answer 1

一般来说，在字体渲染方面，浏览器会以不同的方式渲染字体。因此，与 Firefox 相比，google chrome 上的字体可能看起来不同。

如果你想要我的诚实意见，我认为如果它是一个小菜单，用户不会注意到太多，但我有一个可能的答案。

font-synthesis: none（在 Safari 中） 可能是一个可能的修复，因为浏览器会尝试解释字体。实际上，我所知道的没有通用的东西可以使字体/字符看起来一样。