字體平滑不能應用於按鈕

我已經使用這個片斷以防止webkit的更改抗鋸齒使用CSS時轉換：字體平滑不能應用於按鈕

html{ -webkit-font-smoothing: antialiased; }

這適用於大多數情況下，打不過，當我發現在鉻一些怪事與引導使用此HTML：

<button class="btn btn-inverse">John Doe</button> 
<a class="btn btn-inverse">John Doe</a>

這是它的外觀在OSX /鉻：

enter image description here

小提琴：http://jsfiddle.net/hY2J7/。實際上，它似乎並不適用於按鈕。是否有更安全的技術來觸發webkit中所有元素的相同抗鋸齒功能？

2012-11-25 David

我不能複製的問題。「按鈕」和「a」的文字看起來與圖片的右側相同 - OSX/Chrome 23. – tw16

@ tw16您使用的是哪種OSX版本？ – David

OSX雪豹。 – tw16

由於-webkit-字體平滑是不是一個標準的屬性，它的繼承規則不正確定義。

在這種情況下，對於按鈕元素，-webkit-font-smoothing的默認值是'auto'而不是'inherit'。

您可以通過添加這個CSS規則解決這個問題：

button { 
    -webkit-font-smoothing: inherit; 
}

現在，按鈕元素應該繼承您已經將其設置爲任何值。

您可能還想運行一些其他測試以查看是否有其他元素也顯示相同的行爲。

2012-11-30 03:15:53

你的答案很好，有針對性，也解釋了爲什麼它起作用，所以我投票給你。 – Kristin

你的答案應該是被接受的答案 – Simone

試試這個代碼：

.btn{ 
    text-shadow: 0 0.3px 2px rgba(255,255,255, 0.9); 
}

2012-11-30 02:56:13

* {-webkit-font-smoothing: antialiased;}

2012-12-03 00:33:42

哦，你不知道，我一直在尋找這個答案好幾個月。謝謝！！ – DavidVII

有一個名爲WebKit的字體平滑可以採取值「抗鋸齒」屬性，但是......它不會幫你固定字體平滑。雖然它應該在Macintosh上工作，但它不適用於Windows機器。瀏覽器將覆蓋屬性設置與自己的配置。

那麼，有什麼辦法可以解決這個問題嗎？有一個技巧可以使字體更平滑。你會發現在這篇文章的進一步內容的解決方案（即文章鏈接：http://kazymjir.com/blog/chrome-font-smoothing-antialiasing-fix/）。

這個問題可以用文字陰影CSS3屬性，這將創造我們可以稱之爲「的效果很容易地固定假抗鋸齒「。

我希望這可以幫助您解決您的問題。

2012-12-03 07:58:01

你試過這個嗎？

-webkit-backface-visibility: hidden;

2012-12-03 16:43:00 daveyfaherty

回答