用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的五四三)

3 Shares:
1 comment
  1. 原来如此。。。我一直就在纠结小于12px了怎么办,难不成要去指引用户取消最小安全字体设置么。。。哈哈哈

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

You May Also Like

Painter彩繪學習之水彩作品

2年前從網拍買到將近5折的課程券,期間沒空去上,後來變成好像沒什麼課程好上,剛好最近對Painter有興趣,大概9月份就報名了,沒想到課程一直招不滿學生,不斷往後延期,終於在12月份正式開課…好啦,很興奮的去,結果有點敗興而歸。

IE8災難來了,設計師吐血了

有客戶已經開始使用IE8 (好羨慕…貴公司好有錢...電腦得先跑得動Vista才能安裝IE8的)。 網頁設計師要驚慌了,萬一客戶來幹譙說在IE8下有地方跑版了,又要改到死。 不過,最終極快速的解決方法(該站連不上只有頁庫存畫面)轉貼於此:

繽紛的女性向繪本風格設計

這一張是最初版本。 最近公司接到的一個fb粉絲頁logo設計,主題是繪本。我是既興奮又緊張,因為目前投入fb的設計中大多是在coding,撰寫Div+CSS,偶爾做做制式的視覺版面,很久沒有這種具有挑戰性的任務。