ChromeGoogle瀏覽器下不支援css字型小於12px的解決辦法

先來看下 ie、Firefox、Google瀏覽器下各個字型顯示情況

ie下：

Firefox下：

Google下：

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

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

可是我進行驗證後發現，在Google現在的新版本裡已經無效。那麼我們應該如何設定Google下的字型呢？

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

屬性介紹可以戳這裡：http://www.111cn.net/cssdiv/css/126293.htm

這個屬性前給-webkit-Google首碼，那麼就可以控制字型的大小，代碼如下：
如下圖：

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

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

以給<p>標籤裡再套個<span>

<style>

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

</style>

<p><span>中夢測試10px</span></p>

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

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

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

<style>

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

</style>

<p><span>中夢測試10px</span></p>

這樣在Google瀏覽器下走一遍，字型就能更改了。

如有不足，還望補充。