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

2022-11-10 16:47:45

问题：当字体大小设置成小于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;

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

     <style type="text/css">

         div{margin: 5px;}

         .div8{font-size: 8px;background-color: lightgreen;width:200px;border:1px solid red;-webkit-transform: scale(0.90);}

         .div9{ font-size: 9px; -webkit-transform: scale(0.50);margin:0;padding: 0;}

         .div10{font-size: 10px;background-color: lightgreen;width:200px;border:1px solid red;}

         .div11{font-size: 11px;background-color: lightgreen;width:200px;border:1px solid red;}

         .div12{font-size: 12px;background-color: lightgreen;width:200px;border:1px solid red;}

         .div13{font-size: 13px;background-color: lightgreen;width:200px;border:1px solid red;}

         .div14{font-size: 14px;background-color: lightgreen;width:200px;border:1px solid red;}

     </style>

     <div class="div8">8px8px</div>

     <div style="background-color: lightgreen;width:200px;border:1px solid red;"><p class="div9">9px9px</p></div>

     <div class="div10">10px10px</div>

     <div class="div11">11px11px</div>

     <div class="div12">12px12px</div>

     <div class="div13">13px13px</div>

     <div class="div14">14px14px</div>

码农公寓

相关文章