仅 Mac Safari 中的字体粗细（错误）较轻答案

【问题标题】：Font Weight (incorrectly) Lighter in Mac Safari Only仅 Mac Safari 中的字体粗细（错误）较轻
【发布时间】：2015-03-25 01:19:02
【问题描述】：

此问题仅存在于 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;

【问题讨论】：

Win 7 Safari 上的页面也有所不同：octa.com 的导航项的字母看起来部分变细了，虽然这似乎会根据页面上的一些动态变化而有所不同. （您应该解释您所看到的，而不是仅仅说“观察”。）您应该识别 CSS 差异并尝试在简单的设置中隔离问题，而不是期望其他人调试您的站点。主页上有 26 个标记错误，其中两个似乎与对样式表的引用有关。
@JukkaK.Korpela - 谢谢。我假设您正在使用 w3c 验证器来检查标记是否有错误，或者您正在使用其他工具？仅供参考，我确实比较了css，它是相同的。另外，我确实尝试过简化，但简化版没有同样的问题。
您在“css 几乎相同”的问题中写道。如果它真的相同，那么问题显然出在其他地方 - 在问题中未包含的代码中。
@JukkaK.Korpela 好点。另外，我意识到 WP 的插件代码可能会产生影响（并且对您发现的许多标记错误负责）。谢谢。

标签： css macos fonts safari font-face

【解决方案1】：

尝试-webkit-font-smoothing：抗锯齿；

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

【讨论】：

【解决方案2】：

（我无法发布 cmets，所以我只能通过发布将我的发现添加到对话中。）

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

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

fiddle here 显示问题 - 仅限 Safari

【讨论】：

【解决方案3】：

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

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

-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”

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

【讨论】：