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;

 

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