关于Google Chorme中字体小于12px的问题

问题：当字体大小设置成小于12px时，Google chrome中字体的大小始终显示为12px。

　　而其他浏览器则没有这个问题。

 

这时只需要在要改变字体大小的元素中添加 -webkit-transform:scale(0.90);  代码即可，当然不要忘记设置字体的大小。

 

此时科普下  -webkit-transform:scale(0.90);  

　　首先webkit是一个开源的浏览器引擎。想详细了解的请百度百科。

　　再者，transform是CSS3的一个语法。transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

　　其中scale()表示缩放比例，1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。举个例子： font-size: 12px; -webkit-transform: scale(0.90);  那么其最终大小为  12px * 0.9（缩放比例） = 10.8px; 

　　

　　不过这时有会出现另一个问题，当该元素中有宽度、背景时，宽度、背景也被缩放了。此时需要添加一个元素将要改变字体大小的内容包裹，并设置字体的大小，外边包裹的元素设置背景宽度。代码如下

 1     <style type="text/css">
 2         div{margin: 5px;}
 3         .div8{font-size: 8px;background-color: lightgreen;width:200px;border:1px solid red;-webkit-transform: scale(0.90);}
 4         .div9{ font-size: 9px; -webkit-transform: scale(0.50);margin:0;padding: 0;}
 5         .div10{font-size: 10px;background-color: lightgreen;width:200px;border:1px solid red;}
 6         .div11{font-size: 11px;background-color: lightgreen;width:200px;border:1px solid red;}
 7         .div12{font-size: 12px;background-color: lightgreen;width:200px;border:1px solid red;}
 8         .div13{font-size: 13px;background-color: lightgreen;width:200px;border:1px solid red;}
 9         .div14{font-size: 14px;background-color: lightgreen;width:200px;border:1px solid red;}
10     </style>
11 
12     <div class="div8">8px8px</div>
13     <div style="background-color: lightgreen;width:200px;border:1px solid red;"><p class="div9">9px9px</p></div>
14     <div class="div10">10px10px</div>
15     <div class="div11">11px11px</div>
16     <div class="div12">12px12px</div>
17     <div class="div13">13px13px</div>
18     <div class="div14">14px14px</div>

 

转载于:https://www.cnblogs.com/babyFish/p/6214042.html