先來看下 ie、火狐、谷歌瀏覽器下各個字體顯示情況

ie下：

火狐下：

谷歌下：

從上面的圖可以很明顯看出谷歌下 css設置字體大小為12px及以下時，顯示都是一樣大小，都是默認12px;

那么網上一直有一個方法就是給當前樣式添加谷歌私有屬性：-webkit-text-size-adjust:none;

可是我進行驗證后發現，在谷歌現在的新版本里已經無效。那么我們應該如何設置谷歌下的字體呢？

我們可以使用到 css3里的一個屬性：transform:scale()

這個屬性前給-webkit-谷歌前綴，那么就可以控制字體的大小，代碼如下：

p{font-size:10px;-webkit-transform:scale(0.8);}

/*這里的數字0.8，是縮放比例，可以根據情況變化。*/

中夢測試10px

如下圖：

但是要注意一點，如果這個

元素有背景的話，給這個屬性會使背景也隨著變化，所以，我們可以給

標簽里再套個

p span{font-size:10px;-webkit-transform:scale(0.8);}

中夢測試10px

你會發現沒有效果，如圖：

這是因為transform:scale()這個屬性只為可以縮放可以定義寬高的元素，而span是行內元素；

我們可以給span元素定義一個display:block,這樣就可以了。

p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}

中夢測試10px

這樣在谷歌瀏覽器下走一遍，字體就能更改了。

如有不足，還望補充。

轉載時請注明出處及相應鏈接，本文永久地址：https://blog.yayuanzi.com/3642.html

微信打賞

支付寶打賞

感謝您對作者gordon的打賞，我們會更加努力！????如果您想成為作者，請點我

總結

以上是生活随笔為你收集整理的HTML字体小于12谷歌不兼容,Chrome谷歌浏览器下不支持css字体小于12px的解决办法【原创】...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。