1

此问题仅存在于 Mac Safari 上。
其他浏览器/其他操作系统正常工作。

问题：在此处观察顶部导航的字体粗细：http ://www.octa.com (WordPress)

然后在这里观察顶部导航的字体粗细：http ://www.octa.com/products (Magento)

请注意，虽然它们由不同的代码（WP vs Magento）提供服务，但两个页面之间的 css 几乎相同。

这是css的相关位：

nav.menu li a {
    font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
    font-size: 20px;
    text-align: left;
}

nav.menu li a, #subnavwrapper nav li a {
    color: #FFFFFF;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    padding: 0 46px 0 0;
}

nav li a {
    display: block;
    line-height: 1em;
    text-decoration: none;
}

body {
    color: #000000;
    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-    serif;
    font-size: 14px;
    line-height: 1.55em;
    text-align: center;
    background: black;
}

请注意，字体是使用@font-face 导入的。

我已经尝试了所有方法——关于 SO 和其他文章的许多答案。请注意，从其他答案/资源中收集的以下样式均未更正字体显示。

font-variant:normal;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
4

3 回答 3

1

试试 -webkit-font-smoothing: antialiased;

我发现这个简单的更改使 Safari 的 font-weight 属性更加可靠。

于 2014-05-31T05:33:35.500 回答
1

（我不能发表评论，所以我只能通过发表将我的发现添加到对话中。）

我发现固定位置元素中的文本看起来比Safari 中其他类型的定位更轻。因此，不能像其他地方所建议的那样忽略。

添加--webkit-font-smoothing: antialiased确实解决了这个问题，但它看起来比在 Firefox 中更轻。哪个可以修复 -moz-osx-font-smoothing: grayscale

在这里摆弄以显示问题 - 仅限 Safari

于 2015-03-24T17:06:51.670 回答
0

在@JukkaK.Korpela 的评论/刺激下，我发现了一些事情：

首先，问题的根源是这样的：

-webkit-backface-visibility: hidden;

根据此答案将其添加到代码中以解决动画问题：iPhone WebKit CSS animations cause flicker

不知道如何解决字体和解决闪烁，但我现在至少可以选择解决哪一个。

其次，作为一个狂热的 Firefox/Firebug 用户，我曾尝试在 Safari 中使用 Firebug Lite，以及 Safari 的另一个扩展，但它们都不起作用。因此，对于所有可能试图解决仅 Safari 的问题的人，这里有一个重要提示：

Safari 的“开发”工具。直到我今天做了一些搜索才知道它，但它是工具栏中的一个菜单项。如果您没有看到它，请转到 Preferences->Advanced，然后选中“Show Develop Menu in Toolbar”

使用该工具，我能够快速排除故障并解决此问题。

于 2013-10-01T14:18:33.430 回答