目前网页最小字体以及字体压缩

admin管理员组

文章数量:1516870

目前网页最小字体以及字体压缩

由于第一代网页基本都是为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>

本文标签： 目前网页最小字体以及字体压缩