字型在chrome瀏覽器下最小隻能設定成12px的解決辦法

energy drink發表於2020-11-19

Chrome谷歌瀏覽器下不支援css字型小於12px。
我們先來看個效果圖(chrome下):

給你看個栗子.png

從上面的圖可以很明顯地看出Chrome下css設定字型大小為12px及以下時,顯示的都是一樣大小,都是預設12px;

那麼網上有一個方法就是給當前樣式新增Chrome私有屬性:-webkit-text-size-adjust:none;
可是我進行驗證後發現並無效果。後來查資料瞭解到在Chrome 27之後就取消了對這個屬性的支援,那麼我們應該如何設定Chrome下的字型呢?

可以利用css3的縮放屬性:transform:scale()

.small-font{
font-size: 12px;
-webkit-transform: scale(0.5);
}
這樣在元素上加上這個屬性就OK了,但是隻這樣寫可不會相容IE、FF哦,所以再給一個相容性寫法:

.small-font{
font-size: 12px;
-webkit-transform: scale(0.5);
}
.smallsize-font{
font-size: 6px;
}

PS:有小夥伴讓用rem解決,我在這裡解釋一下哈,em、rem是一種相對單位,根據根元素的大小計算出來,目的是瀏覽器的字型大小變化時,頁面佈局及字型大小能跟著自適應。也就是說反應到瀏覽器要渲染是還是xx px,那Chrome瀏覽器本身是渲染不了12px以下的字型的,所以這個方法是不可行的,rem雖好,但不對這個症。

給我點讚的都是小可愛 _

作者:Wendy曹
連結:https://www.jianshu.com/p/5991523a98f9
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。

相關文章