Safari上的字体问题

Question

我在这个网站上的Safari上的字体有问题(vincentmorin.com).如果单击屏幕右上角的图标,您将看到下拉菜单中的字体看起来很奇怪(细而模糊).

我认为这个问题是由Supersized JS插件引起的.如果您查看未调用Supersized插件的另一个页面(例如:vincentmorin.com/Tour),菜单看起来很好.

另请参见:vincentmorin.com/ dev您可以看到只有在加载第一张幻灯片时才会出现问题.奇怪的!

有人知道是什么原因引起的吗？

谢谢.

Answer 1

Mac上的Safari

出现此问题的原因是您position:fixed在页面上有一个可见元素,Safari会将字体平滑更改为antialiased,使文本看起来很薄和模糊.

图表1

可见position:fixed元素导致文本看起来很薄.

图表2

隐藏元素,文本再次变为正常.

要解决此问题,您应该明确说明字体平滑,如下所示:

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

图表3

应用修复程序,问题就消失了.

有关position:fixed影响的更多信息-webkit-font-smoothing,请参阅我对其他问题的回答.

iOS上的Safari

但是,在iOS设备上,antialiased即使-webkit-font-smoothing设置为subpixel-antialiased并且position:fixed页面上没有可见元素,Safari也会盲目地应用于文本.要纠正此问题,您可以使用-webkit-text-stroke近似文本的外观.

-webkit-text-stroke: 0.5px;

图表4

iPad上的文字薄而模糊.

图表5

使用-webkit-text-stroke模拟文本的原始外观.