Chrome谷歌瀏覽器下不支持css字體小於12px的解決辦法

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

ie下：

火狐下：

谷歌下：

從上面的圖能夠很明顯看出谷歌下 css設置字體大小爲12px及如下時，顯示都是同樣大小，都是默認12px;

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

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

咱們能夠使用到 css3裏的一個屬性：transform:scale()

屬性介紹能夠戳這裏：http://www.w3chtml.com/css3/properties/2d-transform/transform.html

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

1 2 3 4 5 6 7

<style> p{font-size:10px;-webkit-transform:scale(0.8);} /*這裏的數字0.8，是縮放比例，能夠根據狀況變化。*/ </style> <p>中夢測試10px</p>

以下圖：

可是要注意一點，若是這個<p>元素有背景的話，給這個屬性會使背景也隨着變化，因此，咱們能夠給<p>標籤裏再套個<span>

1 2 3 4

<style> p span{font-size:10px;-webkit-transform:scale(0.8);} </style> <p><span>中夢測試10px</span></p>

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

這是由於transform:scale()這個屬性只爲能夠縮放能夠定義寬高的元素，而span是行內元素；

咱們能夠給span元素定義一個display:block,這樣就能夠了。

1 2 3 4

<style> p span{font-size:10px;-webkit-transform:scale(0.8);display:block;} </style> <p><span>中夢測試10px</span></p>

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

若有不足，還望補充。