在所有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?等