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的详细信息，请参阅my answer to another question。

iOS上的Safari

但是，在iOS设备上，即使antialiased设置为-webkit-font-smoothing并且页面上没有可见的subpixel-antialiased元素，Safari也会盲目地将position:fixed应用于文本。要解决此问题，您可以使用-webkit-text-stroke来估算文本的外观。

-webkit-text-stroke: 0.5px;

  

图表4

     

iPad上的文字薄而模糊。   

  

图表5

     

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

Answer 2

尝试添加：

-webkit-font-smoothing: antialiased;

Answer 3

解决此问题的最简单方法是将字体更改为任何Web字体。你的＆＃34; v_helv＆＃34; safari / chrome不支持font。 Fontsquirrel

上有很多免费的交叉兼容浏览器字体

否则，如果使用此代码在Web工具包浏览器类型上打开网页，则可以更改字体类型：

@media all -webkit-device-pixel-ratio {
    body{
        font-family: "HelveticaNeue-Light" !important;
        font-weight: 200
    }
}
@media not -webkit-device-pixel-ratio {
    body{font-family: "HelveticaNeue-UltraLight" !important;}
}