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

發佈留言

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

You May Also Like

我在Takashi House:為何要學素描?

六月份的某日,去買早餐,發現這家咖啡店,好漂亮,外頭招牌還有課程招生的字樣,我就進去詢問了。 老闆自己過去是廣告公司藝術總監,也去日本進修過,我猜Takashi就是他日本名字吧! 我非常喜歡那些幾何和五顏六色的抽象畫,搞不好這是個不錯的學習機會。 於是每週六開始了[創意繪畫]課程。

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

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

自媒體時代的網站架設方案

最近有人前來詢問該如何架個人品牌網站,又得花多少錢,因為離開公司自己創業的他,忽然發現,沒有靠山,只有網路是他最好的依靠,作品集上線才能曝光讓人家知道他的專業度。的確,連我自己都很懷疑:有幾個人願意打開你遞上的光碟讀取個半天逐一點開?不如丟個網址馬上就能一次呈現。還記得一個更血淋淋的故事,在我兼任的單位開放了幾個「全球第一大影音平台」(自己猜~)的講座名額給影音創作團隊申請,那表單中,首當其衝的就是要填寫公司官網網址,光這一欄就刷下不少團隊。

藝術之秋

88颱風那天,台北的情況良好,所以課程繼續,素描是練習畫花。 上次畫白色的咖啡杯時,我以為是最難的挑戰,那天得知要畫白色的花,真的有緊張到…還是硬著頭皮去畫。 讓我印象最深的還不是這件事,而是那天老師的兒子在2F練習拉小提琴,卻聽起來猶如放CD般優雅,讓人好像置身在文藝復興的沙龍中,一邊聽音樂一邊繪畫以及討論彼此的攝影作品。