Question

字体Avenir Next不会在Safari上显示/呈现与在Google Chrome和Firefox上相同的内容。有没有办法解决这个问题或在Safari上为我的网页使用单独的字体？我该怎么做呢？

我更希望解决方案是纯html / css（可能有一个@media用于浏览器？）。如果不可能，我可以使用javascript或jQuery。

编辑：解决了，问题是Safari字体平滑。请参阅下面我自己的答案

Answer 1

嗯，你说JS是可能的，即使它不是你的偏好。

我在大约100年前写了一个名为BAPS（浏览器和插件嗅探器）的库，它可以检测到大量内容并添加了正文类。

你不做任何事情 - 你只需要包含脚本，如果检查DOM，最后会得到一堆正文类。

Answer 2

Safari有自己独立的字体平滑（即，一种自动调整字体的功能，可以从Chrome或Firefox等其他浏览器中渲染出来）。对于我遇到的差异，我们可以手动改变CSS中的自动字体平滑

-webkit-font-smoothing

在我的情况下，Safari上的字体平滑自动设置为抗锯齿，而标准（Chrome和Firefox上使用的字体平滑）是亚像素抗锯齿。

简单地说：

-webkit-font-smoothing: subpixel-antialiased !important;

此字体现在显示与Chrome和其他浏览器相同。