由于第一代网页基本都是为800x600的15’CRT显示器开发的,所以大多数网页都是以9pt或12px为标准的网页字体大小。目前随着大尺寸和高分辨率显示器的普及,过小的网页字体已经让我在浏览网页时出离的郁闷了。
谷歌浏览器上显示字体最小为12px,css设置font-size:10px,显示的时候还是12px大小
可以利用css中的transform属性来缩小:
transform:scale(0.5,1)
第一个参数是X轴比例,第二个参数是Y轴比例,第二个参数可省略,若缺省则等于第一个参数。
缩小方向:
默认是往中间缩小,可以添加 transform-origin:left ,往左侧缩
注意:
①transform只有块级元素有这属性,一开始我把这个属性设置在span上,怎么都不出效果,换div就有效果了
②如果你是因为字体太大,放div中会自动换行,想用这方法来压缩字体,去除换行,那就省省吧,我刚踩过这个坑。这种方式并不是在压缩字体,而是在压缩整个div。
我们可以借助 css3 中的 -webkit-transform:scale(num) 来对文字进行缩小了解决这个问题,其中 num 是设置的“字体大小/12px”。比如想要显示 8px 的文字,则 num=8/12=0.67。
<div style="font-size: 15px">15px的文字</div>
<div style="font-size: 14px">14px的文字</div>
<div style="font-size: 13px">13px的文字</div>
<div style="font-size: 12px">12px的文字</div>
<div style="font-size: 12px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.92);">
11px的文字
</div>
<div style="font-size: 12px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.83);">
10px的文字
</div>
<div style="font-size: 12px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.75);">
9px的文字
</div>
<div style="font-size: 12px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.75);">
8px的文字
</div>