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>

 

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

若有不足，還望補充。

番外篇：

中文版的chrome有個12px字體限制的問題，就是當字體小於12px時候都以12px來顯示，這個問題在中文網站中並不突出，由於中文字體爲了顯示清晰通常都定義爲大於或等於12px，但若是是一些英文網站那就很差說了，這時12px的限制就會破壞頁面的美感，甚至由於文字變大而致使頁面變形。

 

可使用Webkit 的內核的 -webkit-text-size-adjust 的私有 CSS 屬性來解決，好比下面的代碼就能夠成功的解決，經過它便可實現字體大小不隨終端設備或瀏覽器影響。樣式定義以下：

#chrome10px{ -webkit-text-size-adjust:none; font-size:10px; }

只要 加了 -webkit-text-size-adjust:none; 字體大小 就不受限制了。

 

可是，在chrome更新到27版本以後就不能夠用了。

那此時應該怎麼辦呢？想想，仍是有辦法解決的。

 

chrome是支持css3的。那麼咱們是否能夠寫，

 

-webkit-transform : scale()  方法來解決呢？

 

由於ie是支持12號及如下字號的。

font-size : 12px;

-webkit-transform : scale(0.84,0.84) ;

*font-size:10px;

 

雖然有一點差距。不能精確到小數點後兩位。。可是已經很好了。能夠湊合用了。