今天，群里有人問道font-size<12 chrome不支持的問題。說實話，這個我一直都沒留意過，正好借個機會給自己補習一下。
自己親自試過，確實如此，當font-size<12 chrome都當12px處理了，據說以前有個屬性可以用，不過已經淘汰不支持了，也無法驗證，那這里就不說了。這里用的方法是用css3的新屬性：transform:scale();來達到對文本進行縮放，但是注意，他會對做用的元素進行整體縮放，而這不是我們所希望的，因為我們只是想單獨縮放字體，所以采取一些措施：就是用一個標簽把需要縮放的文本包起來，然后單獨對他添加transform:scale();避免對其他元素影響。好了，說了這么多，看代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JS Bin</title> 6 </head> 7 <body> 8 <div style="font-size:16px">Font Size 16px</div> 9 <div style="font-size:15px">Font Size 15px</div> 10 <div style="font-size:14px">Font Size 14px</div> 11 <div style="font-size:13px">Font Size 13px</div> 12 <div style="font-size:12px">Font Size 12px</div> 13 <div style="font-size:11px" class="small">Font Size 11px</div> 14 <div style="font-size:10px;border:1px solid red;" class="">Font Size 10px</div> 15 <div style="font-size:9px" class="small">Font Size 9px</div> 16 <div style="font-size:8px;border:1px solid green;"><span class="small2">Font Size 8px</span></div> 17 <div style="font-size:7px;border:1px solid blue;"><span class="small">Font Size 7px</span><a href="#">baidu.com</a></div> 18 <div style="font-size:6px;border:1px solid blue;"><p class="small">Font Size 6px</p></div> 19 </body> 20 </html>
這是樣式：
1 .small,.small2{-webkit-transform:scale(0.8);margin:0;padding:0;border:1px solid red;} 2 span.small{display:inline-block;}
這是結果：
由上面結果可以看出，當給整個div添加small類的時候，紅框的區域相比font-size：10px的紅框是有縮小的，這說明整個div所有樣式尺寸都縮小的0.8，而不單單是font-size
再看font-size：8px貌似不起作用，沒錯，因為他用了small2的類名，而這個沒有display：inline-block;所以得出結論，這里scale是失效的。理解起來也很容易，scale本就是對尺寸的元素進行縮放，而span是內聯元素，沒有尺寸，自然不起作用失效。為什么用display：inline-block，我想找個就不需要多解釋了。
當然，對比看font-size:6px可以看出，不是只有span可以用來包含需要縮放文本的標簽，p標簽也是可以的，這里就省去讓他塊化的一步了
參考：http://www.w3ci.com/front/xHTMLCSS/34.html