html 字体最小多少,浏览器最小显示12px字体的解决方法

谷歌浏览器上显示字体最小为12px，css设置font-size：10px，显示的时候还是12px大小

可以利用css中的transform属性来缩小：

transform:scale(0.5,1)

第一个参数是X轴比例，第二个参数是Y轴比例，第二个参数可省略，若缺省则等于第一个参数。

缩小方向：

默认是往中间缩小，可以添加 transform-origin:left ，往左侧缩

注意：

①transform只有块级元素有这属性，一开始我把这个属性设置在span上，怎么都不出效果，换div就有效果了

②如果你是因为字体太大，放div中会自动换行，想用这方法来压缩字体，去除换行，那就省省吧，我刚踩过这个坑。这种方式并不是在压缩字体，而是在压缩整个div。

举个例子：

有一个div，想写10个字，但它太窄了，写到第8个字之后，就换行了。这时想加上transform:scale(0.5,1)，来实现不换行。最终的效果是：最后2个字仍然在下面一行，整个div变窄了。

最后的方法是，把div宽度加长，右margin设为负数，再进行压缩。

谷歌浏览器默认最小字体为12px，小于12px的字体它都以12px显示，具体效果见下图。有些特殊情况下我们需要字体小点，特别是在制作英文网站的时候，怎么办？既然有问题，我们就有解决问题的方法。

xjun0812测试16像素

xjun0812测试14像素

xjun0812测试12像素

xjun0812测试10像素

xjun0812测试10像素

IE等浏览器效果如下：

Chrome浏览器下的效果：

在网上有一个方法就是在html或者body里添加一句谷歌浏览器专有的属性。

html,body{ -webkit-text-size-adjust:none; }

可是我用了之后发现并没有什么用，原来在新版本的谷歌浏览器里已经无效。那么我们现在应该怎么办呢？

我们可以使用CSS3的一个缩放属性：transform:scale()，我这里给最后一行设置的代码如下(倒数第二行不做任何其他设置，以做参考)：

-webkit-transform:scale(0.833);

/*这个数字0.833，是缩放比例，可以根据你自己的情况不同而不同。*/

从上图可以看到最后一行是变小了，但是左边却出现了留白。是因为做缩放处理的时候把宽度也缩放了。还有要注意一点，如果这个

元素有背景的话，也会使背景也随着变化，所以，我们通常的做法是给

标签里再套个一个标签，我这里用标签。

xjun0812测试16像素

xjun0812测试14像素

xjun0812测试12像素

xjun0812测试10像素

xjun0812测试10像素

你会发现现在反而没有效果了，如图：

这是因为transform:scale()这个属性只为可以缩放可以定义宽高的元素，而span是行内元素；我们给span元素定义一个display:block,这样就可以了。

我们会发现一个问题，不管span元素是否左浮动，还是会发现左边出现了留白，我们可以通过设置宽度等其他办法来解决，结果如下：

最后，因时间仓促，资质有限，文中表述仅代表个人观点，如果有更好的方法，欢迎留言。