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

Question

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

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

字体渲染周围一片模糊：

字体渲染“骨感”模式：

而且，我发现，如果我将鼠标悬停在已应用在盘旋CSS3过渡元素（即标志。），该模糊渲染字体呈现变得骨瘦如柴，但是当CS S3动画结束时，他们恢复模糊呈现。

的原因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。

帮助？请？
在此先感谢！ :)

UPDATE：

我使用verdana的菜单项和其他字体为//包子venit消息。

呈现不好看的字体的另一个例子是谷歌Analytics（分析）页面上的菜单：

Answer 1

那不是渲染“翻江倒海”，它使用比Windows的整体不同的字体渲染策略。 OS X倾向于更好地保留角色的原始形状，而Windows则尝试将字符推入像素网格。结果看起来不同，而不是“更糟”。是的，你需要考虑到这一点作为你的设计的一部分。

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