如何讓瀏覽器支持字體小于12px的解決辦法
從所周知， 很多瀏覽器，比如說(shuō)谷歌默認醉小字體為12px，小于12px的字體它都以12px顯示，比如說(shuō)你對某個(gè)類(lèi)的文字大小設置為10PX，它依舊顯示的是12PX，具體效果見(jiàn)下圖。但是在開(kāi)發(fā)的時(shí)候，可能有需要用到比12更小的文字，那怎么辦呢？有什么辦法來(lái)處理？
IE等瀏覽器效果如下：
Chrome瀏覽器下的效果：
在網(wǎng)上有一個(gè)方法就是在html或者body里添加一句谷歌瀏覽器專(zhuān)有的屬性。
可是我用了之后發(fā)現并沒(méi)有什么用，原來(lái)在新版本的谷歌瀏覽器里已經(jīng)無(wú)效。那么我們現在應該怎么辦呢？
我們可以使用CSS3的一個(gè)縮放屬性：transform:scale()，我這里給醉后一行設置的代碼如下（倒數第二行不做任何其他設置，以做參考）：
-webkit-transform:scale(0.833); /*這個(gè)數字0.833，是縮放比例，可以根據你自己的情況不同而不同。*/
從上圖可以看到醉后一行是變小了，但是左邊卻出現了留白。是因為做縮放處理的時(shí)候把寬度也縮放了。還有要注意一點(diǎn)，如果這個(gè)
元素有背景的話(huà)，也會(huì )使背景也隨著(zhù)變化，所以，我們通常的做法是給
標簽里再套個(gè)一個(gè)標簽，我這里用標簽。
xjun0812測試16像素
xjun0812測試14像素
xjun0812測試12像素
xjun0812測試10像素
xjun0812測試10像素
你會(huì )發(fā)現現在反而沒(méi)有效果了，如圖：
這是因為transform:scale()這個(gè)屬性只為可以縮放可以定義寬高的元素，而span是行內元素；我們給span元素定義一個(gè)display:block,這樣就可以了。
我們會(huì )發(fā)現一個(gè)問(wèn)題，不管span元素是否左浮動(dòng)，還是會(huì )發(fā)現左邊出現了留白，我們可以通過(guò)設置寬度等其他辦法來(lái)解決，結果如下：
