font-size<12 chrome不支持解決

時間 2019-11-15

原文原文鏈接

今天，羣裏有人問道font-size<12 chrome不支持的問題。說實話，這個我一直都沒留意過，正好借個機會給本身補習一下。css

本身親自試過，確實如此，當font-size<12 chrome都當12px處理了，聽說之前有個屬性能夠用，不過已經淘汰不支持了，也沒法驗證，那這裏就不說了。這裏用的方法是用css3的新屬性：transform:scale();來達到對文本進行縮放，可是注意，他會對作用的元素進行總體縮放，而這不是咱們所但願的，由於咱們只是想單獨縮放字體，因此採起一些措施：就是用一個標籤把須要縮放的文本包起來，而後單獨對他添加transform:scale();避免對其餘元素影響。好了，說了這麼多，看代碼：html

 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>

這是樣式：css3

1 .small,.small2{-webkit-transform:scale(0.8);margin:0;padding:0;border:1px solid red;}
2 span.small{display:inline-block;}

這是結果：web

由上面結果能夠看出，當給整個div添加small類的時候，紅框的區域相比font-size：10px的紅框是有縮小的，這說明整個div全部樣式尺寸都縮小的0.8，而不僅僅是font-sizechrome

再看font-size：8px貌似不起做用，沒錯，由於他用了small2的類名，而這個沒有display：inline-block;因此得出結論，這裏scale是失效的。理解起來也很容易，scale本就是對尺寸的元素進行縮放，而span是內聯元素，沒有尺寸，天然不起做用失效。爲何用display：inline-block，我想找個就不須要多解釋了。字體

固然，對比看font-size:6px能夠看出，不是隻有span能夠用來包含須要縮放文本的標籤，p標籤也是能夠的，這裏就省去讓他塊化的一步了spa

參考：http://www.w3ci.com/front/xHTMLCSS/34.htmlcode

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。