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

chrome css font-size 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的五四三)

留下回應

1 則迴響

Leave a Comment.