所有OS X浏览器上的字体渲染方式都不同

Question

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

它们在Windows上看起来都很好，但是当我在OS X上试用它们时，它们会错误地渲染。更奇怪的是，它们在页面上表现得很好，但[在我看来]在另一个页面上表现不佳：

字体呈现模糊：

字体以“瘦”模式呈现：

另外，我发现如果我将鼠标悬停在悬停时应用了CSS3过渡的元素（即徽标）上，模糊呈现的字体将呈现为瘦> ，但是当CSS3动画结束时，它们会恢复模糊渲染。

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 Analytics页面上的菜单：

Answer 1

这不是“糟糕”，它使用了与Windows不同的字体渲染策略。 OS X倾向于更好地保留角色的原始形状，而Windows试图将字符推入像素网格。结果看起来不同，而不是“更差”。是的，您需要将此作为设计的一部分考虑在内。

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