Mac/Safari下字体变细的问题

Question

在我的上一个网站上，文本在Chrome和Firefox上自然完美，没有触及字体平滑或其他任何东西。
但是在Mac / Safari 7上，文本看起来不错，然后立即变得更细（太细/不好阅读）。

经过一些研究[参见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问题的一些解释？ 是否有更好的解决方案？ 我的字体可能是问题的一部分吗？

谢谢。

- Miguel Bocquier

---

根据这个答案，-webkit-font-smoothing不再使用。你是说它在Safari中仍然有影响吗？ - Mr Lister

当然它仍在使用！在所有WebKit浏览器中都有效。 - Miguel Bocquier

@MrLister 今天在Safari中仍然有效 :) - Tien Do

Answer 1

所以我通过应用解决了我的问题:

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

现在我的字体在所有浏览器上都保持一致。

- Miguel Bocquier

---

是的，但这样做会使您的字体不再使用平滑的子像素渲染。尝试使用（默认）子像素渲染进行一些测试，并将所有背景div设置为黑色。在我的许多案例中，这种方法都有效。当您在某个地方打开css -webkit-backface-visibility: hidden;时，子像素渲染也会关闭（因此字体变得更细）。实际上，在Safari中进行子像素字体渲染非常棘手且不一致，但在某些情况下是可能的。 - Garavani

今天这个问题也解决了我的问题——Safari没有像FF或Chrome一样呈现Google字体（Lato，11px，700字重）；实际上，Safari似乎根本没有使用粗体文本。尽管不是这样，但灰色背景上的黑色文本看起来似乎是不同的灰色阴影。将此属性添加到我的CSS中完全解决了问题。 - Blazemonger

那不是一种解决方法，实际上会影响你网站中所有字体的权重，即使它们之前没有问题。那只是懒惰的编码。 - Joshua Pekera

你认为应该提出什么解决方案，而不是称之为懒惰？ - bob

如果您的文本使用了不透明度小于1，则“-webkit-font-smoothing: subpixel-antialiased;”将不起作用。 - Saurabh Sharma

Answer 2

尝试两者

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

- Mihir ajagia

---

设置描边实际上比平滑效果更大。对于某些区域来说，这真的非常好。谢谢！ - LinusGeffarth

Answer 3

使用-webkit-font-smoothing：subpixel-antialiased有所帮助，但Safari，Chrome和Firefox之间仍存在较大差异。我意识到尝试在Safari中加粗字体是行不通的，因此我在其他浏览器中使字体变轻，然后使用稍微加粗一些的字重。最终使字体在各个浏览器中统一的方法如下：

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

- Gavin

Answer 4

只需使用以下代码： link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet"

而不是这样： link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"

用这种方法解决了我的问题！

- Martin Jutras

Answer 5

试试这个：

transform: translateZ(0.1px);

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

- Rauli Rajande