所有 OS X 浏览器上的字体呈现方式不同

Question

我正在开发这个网站，我使用 CSS 来设置菜单按钮的样式。

它们在 Windows 上看起来都不错，但是当我在 OS X 上试用它们时，它们呈现错误。更奇怪的是，它们在一个页面上显示得很好，但 [在我看来] 在另一个页面上却不太好：

字体呈现模糊：

字体以“瘦”模式呈现：

另外，我发现如果我将鼠标悬停在一个元素（即徽标）上，该元素（即徽标）在悬停时应用了 CSS3 过渡，blurry 渲染的字体会变成 skinny，但是当 CSS3 动画结束时，它们会恢复 blurry 渲染。

原因中的 CSS 转换：

.logo {
    float: left;
    margin-left: 0px;

    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;

    -webkit-transform: rotate(0deg);
}

.logo:hover {
    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;  

    -moz-transform: rotate(-3deg) scale(1);  /* FF3.5+ */
    -o-transform: rotate(-3deg) scale(1);  /* Opera 10.5 */
    -webkit-transform: rotate(-3deg) scale(1);  /* Saf3.1+, Chrome */
    transform: rotate(-3deg) scale(1);  

    zoom: 1;
}

您可以在这里现场观察这种现象：http://pote.ca。

帮助？请问？
提前致谢！ :)

更新：

我将verdana 用于菜单项，并为 // bun venit 消息使用另一种字体。

另一个看起来不好看的字体示例是 Google 分析页面上的菜单：

Answer 1

这并没有“糟糕”地渲染，它使用了与 Windows 完全不同的字体渲染策略。 OS X 倾向于更好地保留字符的原始形状，而 Windows 则试图将字符推入像素网格。结果看起来不同，而不是“更糟”。是的，您需要在设计中考虑到这一点。

有关参考，请参阅A Closer Look At Font Rendering、Coding Horror: What's Wrong With Apple's Font Rendering? 等。