Question

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

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

然后在此处观察顶部导航的字体粗细：http://www.octa.com/products（Magento）

注意虽然它们由不同的代码（WP与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;

Answer 1

试试-webkit-font-smoothing：antialiased;

我发现这个简单的更改使Safari的字体权重属性更加可靠。

Answer 2

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

我发现固定位置元素中的文字比Safari 中其他类型的定位更轻盈重量。因此不能像其他地方所建议的那样被忽视。

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

修复

摆弄here以显示问题 - 仅限Safari

Answer 3

根据@ JukkaK.Korpela的评论/评论，我发现了一些事情：

首先，问题的根源是：

-webkit-backface-visibility: hidden;

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

不知道如何解决字体和解决闪烁问题，但我至少可以选择现在要解决的问题。

其次，作为狂热的Firefox / Firebug用户，我曾尝试在Safari中使用Firebug Lite，以及Safari的另一个扩展，但它们无法正常工作。所以，对于那些可能正在尝试解决仅限Safari问题的人，这里有一个很大的提示：

Safari的“开发”工具。在我今天做了一些搜索之前根本不知道它，但它是工具栏中的菜单项。如果您没有看到，请转到Preferences-＆gt; Advanced，然后选中“在工具栏中显示开发菜单”

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

仅限Mac Safari中的字体粗细（错误）打火机

3 个答案: