從所周知， 很多瀏覽器，比如說谷歌默認(rèn)醉小字體為12px，小于12px的字體它都以12px顯示，比如說你對某個(gè)類的文字大小設(shè)置為10PX，它依舊顯示的是12PX，具體效果見下圖。但是在開發(fā)的時(shí)候，可能有需要用到比12更小的文字，那怎么辦呢？有什么辦法來處理？

      IE等瀏覽器效果如下：

      Chrome瀏覽器下的效果：

      在網(wǎng)上有一個(gè)方法就是在html或者body里添加一句谷歌瀏覽器專有的屬性。

      可是我用了之后發(fā)現(xiàn)并沒有什么用，原來在新版本的谷歌瀏覽器里已經(jīng)無效。那么我們現(xiàn)在應(yīng)該怎么辦呢？

      我們可以使用CSS3的一個(gè)縮放屬性：transform:scale()，我這里給醉后一行設(shè)置的代碼如下（倒數(shù)第二行不做任何其他設(shè)置，以做參考）：

-webkit-transform:scale(0.833);
/*這個(gè)數(shù)字0.833，是縮放比例，可以根據(jù)你自己的情況不同而不同。*/

      從上圖可以看到醉后一行是變小了，但是左邊卻出現(xiàn)了留白。是因?yàn)樽隹s放處理的時(shí)候把寬度也縮放了。還有要注意一點(diǎn)，如果這個(gè)

元素有背景的話，也會使背景也隨著變化，所以，我們通常的做法是給

標(biāo)簽里再套個(gè)一個(gè)標(biāo)簽，我這里用標(biāo)簽。

xjun0812測試16像素

xjun0812測試14像素

xjun0812測試12像素

xjun0812測試10像素

xjun0812測試10像素

      你會發(fā)現(xiàn)現(xiàn)在反而沒有效果了，如圖：

      這是因?yàn)閠ransform:scale()這個(gè)屬性只為可以縮放可以定義寬高的元素，而span是行內(nèi)元素；我們給span元素定義一個(gè)display:block,這樣就可以了。

      我們會發(fā)現(xiàn)一個(gè)問題，不管span元素是否左浮動，還是會發(fā)現(xiàn)左邊出現(xiàn)了留白，我們可以通過設(shè)置寬度等其他辦法來解決，結(jié)果如下：