Mac/Safari 上的字体粗细变轻答案

【问题标题】：Font weight turns lighter on Mac/SafariMac/Safari 上的字体粗细变轻
【发布时间】：2014-02-12 05:18:30
【问题描述】：

在我上一个网站上，文本在 chrome 和 firefox 上自然完美，无需触摸字体平滑或其他任何东西。
但在 Mac / Safari 7 上，文本看起来很好，然后立即变薄（太薄/不好看）。

做了一些研究后 [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
和一些使用

的测试

-webkit-font-smoothing

看起来 Safari 首先显示文本：

-webkit-font-smoothing: subpixel-antialiased;

然后在你得到闪烁效果之后，当它把字体变成：

-webkit-font-smoothing: antialiased;

所以在我看来，我别无选择，只能强迫

-webkit-font-smoothing: subpixel-antialiased;

使我的网站在所有浏览器上保持一致。
我正在使用字体 Avenir Std Roman。

对 Safari 问题的一些解释？有更好的解决方案吗？我的字体可能是问题的一部分吗？

谢谢。

【问题讨论】：

根据this answer here，不再使用-webkit-font-smoothing。你是说它在 Safari 中仍然有效吗？
当然还在用！在所有 webkit 浏览器中的效果。
@MrLister 今天在 Safari 中仍然有效 :)

标签： css fonts safari font-smoothing

【解决方案1】：

使用-webkit-font-smoothing: subpixel-antialiased 有点效果，但Safari、Chrome 和Firefox 之间的区别仍然太大。我意识到尝试在 Safari 中使字体更粗是行不通的，所以我在其他浏览器中使字体更轻，然后使用稍粗的字体粗细。最终对我来说跨浏览器的字体权重标准化是这样的：

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

【讨论】：

【解决方案2】：

试试这个：

transform: translateZ(0.1px);

Mac 上的 Webkit 浏览器在 2d 和 3d 文本元素的抗锯齿上存在不同的已知问题。将 3d 属性赋予元素通常可以解决问题。

【讨论】：

【解决方案3】：

就用这个吧： 链接 href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet"

改为： 链接 href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"

问题就这样解决了！

【讨论】：

【解决方案4】：

两个都试试

{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}

【讨论】：

设置笔触实际上比平滑的效果要大得多。对于某些领域来说，这真的很棒。谢谢！

【解决方案5】：

所以我解决了申请问题：

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

现在我的字体在每个浏览器上都是一致的。

【讨论】：

是的，但是通过这种方式，您的字体不再具有平滑的亚像素渲染。尝试使用（默认）子像素渲染进行一些测试，并将字体下的所有背景 div 设置为黑色。这在我的许多情况下都有效。当您打开 css -webkit-backface-visibility: hidden; 时，亚像素渲染也被关闭（因此字体变细）在某个地方。实际上，Safari 中的亚像素字体渲染非常棘手且不一致，但在某些情况下是可能的。
这也解决了我今天的问题——Safari 没有像 FF 或 Chrome 那样渲染 Google 字体（Lato，11px，700 字体粗细）；事实上，Safari 似乎根本没有使用粗体文本。黑底灰字看起来是一种不同的灰色阴影，尽管它不是。将此属性添加到我的 CSS 中完全解决了问题。
这不是一个修复方法，事实上它会影响您网站中所有字体的重量，即使它们没有问题。那只是懒惰的编码。
@JoshuaPekera 与其说它是懒惰的，不如说您有什么建议作为解决方案？
如果你的文本使用不透明度 -webkit-font-smoothing: subpixel-antialiased; 将不起作用