用CSS解決Chrome字體最小值12px

製作網頁時，必經流程之一是隨時開啟IE、Firefox、Chrome甚至Opera和Safari檢視自己的html/css有沒有跑版。最近我遭遇到的一個問題是：明明把font-size調到75%，IE和Firefox都很乖乖的顯示小小的字，偏偏Chrome就是硬不鳥我。原來，是Chrome本身預設最小字型為12px (關於px、%與em等等的差別請見此)，75%絕對比12px小，但撼動不了Chrome預設值。我們當然不可能要使用者(客戶端)去修改Chrome設定，所以就走CSS的方法，很簡單，在選擇器(Selector)下這個語法：

-webkit-text-size-adjust:none;

範例：

.smallText {

font-size:11px;
-webkit-text-size-adjust:none;

}

那麼不管你的font-size下多少，Chrome都會乖乖聽話了。

為何這語法有用？或許因為Chrome是使用webkit引擎，在CSS中有一套因應webkit的寫法，自然乖乖聽話了。

※ 2011/3/31  推薦延伸閱讀：小心使用 -webkit-text-size-adjust: none; (by Frank的五四三)