Safari上的字体问题

Question

Safari上的字体问题

javascriptcssfontssafarisupersized

3

我在Safari浏览器上访问vincentmorin.com网站时遇到了字体问题。如果您单击屏幕右上角的图标，您会发现下拉菜单中的字体看起来很奇怪（细且模糊）。

enter image description here

我认为问题是由Supersized JS插件引起的。如果您查看另一个未调用Supersized插件的页面（例如：vincentmorin.com/Tour），则菜单看起来很好。

enter image description here

还可以在这里查看: vincentmorin.com/dev，你会发现问题只在加载第一张幻灯片时出现。很奇怪！

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

谢谢。

- Leo Stein

我在我的MacBook Pro Retina上看不到任何区别。 - gilly3

嗨，这很奇怪。我编辑了带有图片的帖子以向您展示。我在MacBook Pro和iPad Air上验证了该问题。 - Leo Stein

1

顺便说一句，我在Safari非Retina版本中也遇到了同样的问题，但在MacBook Air上的Chrome和Firefox中，一切看起来都像你的第二张截图。 - nilfalse

我在Safari中无法看到它，无论是视网膜屏幕还是非视网膜屏幕。以下是比较截图，显示了Chrome和Safari在我的视网膜屏幕和非视网膜屏幕上的两个页面。 - gilly3

这个问题在Chrome/Ipad上也是可见的，我已经拍了截图。 - Leo Stein

显示剩余3条评论

3个回答

0

尝试添加：

-webkit-font-smoothing: antialiased;

- Aaroniker

我尝试了但没有成功，可以在这里看到：http://vincentmorin.com/_dev_/ 你也可以看到这个问题只发生在第一张幻灯片加载时。很奇怪！ - Leo Stein

0

解决这个问题最简单的方法是将字体更改为任何网络字体。您的“v_helv”字体在Safari / Chrome上支持不好。Fontsquirrel上有很多免费的跨浏览器字体。

否则，如果网页在Webkit浏览器类型上打开，您可以使用以下代码更改字体类型：

@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;}
}

- Eldwin Eldwin

嗨，（v_helv只是我给Helvetica字体起的名字），除了主页上有Supersized JS插件之外，字体在其他页面上都很完美。请看这里：http://vincentmorin.com/_dev_/，你会发现字体在第一张幻灯片出现之前都是正常的。 - Leo Stein

我相信这是字体问题。我曾经遇到过和你一样的问题。我已经编辑了我的答案。我认为HelveticaNeue-UltraLight在webkit浏览器上支持不好。 - Eldwin Eldwin

嗨，基本上你告诉我必须使用HelveticaNeue-Light而不是HelveticaNeue-UltraLight？ - Leo Stein

是的，没错。我认为HelveticaNeue-UltraLight在Firefox上呈现得很好，但在Webkit浏览器（Chrome和Safari）上不行。如果您正在使用“HelveticaNeue-Light”，则可以使用“font-weight”属性更改字符的粗细，将其放置在400以下（400为正常）。其他没有这个问题的人可能已经在他们的操作系统上安装了原始字体。 - Eldwin Eldwin

@EldwinEldwin：我遇到了与Raleway字体类似的问题，但切换到Helvetica或Arial并没有解决这个问题。在position:fixed元素中的文本要么异常细，要么出现锯齿状（当我在body中添加-webkit-font-smoothing: subpixel-antialiased;时）。 - Arnaud Renaud

嗨@ArnaudRenaud，请发布一个新问题，包括您网站预览的链接和更多描述，这样我可以进一步检查并尝试给您答案。 - Eldwin Eldwin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Antony · Accepted Answer

在 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 设备上，即使页面上没有可见的 position:fixed 元素，并且 -webkit-font-smoothing 被设置为 subpixel-antialiased，Safari 仍会盲目地将 antialiased 应用于文本。要纠正此问题，您可以使用 -webkit-text-stroke 来近似文本的外观。

-webkit-text-stroke: 0.5px;

展示4

iPad上的文本过于细小和模糊。

展示5

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