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像素

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像素

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

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

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

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

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

php用360浏览器显示不正常,win10系统下360浏览器网页显示不正常的解决方法
win10系统下360浏览器网页显示不正常怎么办?这是最近不少朋友都向小编咨询的问题.他们表示若干页面在360的浏览器上显示不正常,可是在其他的浏览器上却都是正常状态.那么,问题到底出在哪?下面,系统 ...
CAD图纸打印成PDF，字体间距变宽或显示不全的完美解决方法
1.cad在打印为PDF文件时,字体会变宽,显示如下图 cad显示: 打印为PDF后显示,字体间隔明显变宽了解决办法:在布局打印中,选择PDF选项,然后在字体处理中选择去掉"捕获图形中使 ...
jsp页面，在浏览器端显示时会出现乱码解决方法
这种乱码的原因是没有在页面里指定使用的字符集编码,JSP页面中出现了中文字符,而默认的ISO-8859-1字符集中无中文字符,解决方法:只要在页面开始地方用下面代码指定字符集编码即可,在JSP页面中指 ...
Microsoft Edge浏览器不显示收藏夹栏解决方法
因为感觉Microsoft Edge的界面看着很清爽,所以最近使用频率很高.但是在浏览页面时,发现页面的顶部不显示收藏夹栏目,想打开收藏夹里的链接只能先打开一个新的页面,再选择收藏的链接,很不方便. ...
浏览器最小显示12px字体的解决方法
浏览器最小显示12px字体的解决方法参考文章: (1)浏览器最小显示12px字体的解决方法 (2)https://www.cnblogs.com/Rawls/p/11363939.html (3)h ...
android自带中文字体,Android更换系统默认显示的字体使用自定义字体
序言上一篇Android 自定义字体,更换系统默认显示的字体使用自定义字体有讲到怎样指定控件显示指定字体,怎样整个软件显示指定字体,怎样WebView加载指定字体,但是还留下一个怎样修改整个系统的默 ...
android使用系统字体文件,Android 自定义字体，更换系统默认显示的字体使用自定义字体...
序言: 1.指定控件显示指定字体有时为了美化UI,需要在指定控件中显示特定的字体,而这个字体在Android系统中却没有,此时可将需要的字体文件存放在assets文件夹中,在为控件设置Typefac ...
IE8浏览器的访问网页显示证书错误的解决方法
https://blog.csdn.net/m0_74847010/article/details/130413078 我在这篇文章中最后一张图访问网站验证时,显示证书错误. 解决方法:将cer证书更 ...
qq 游戏计算机内存不足,腾讯手游助手显示内存不足的解决方法
很多游戏玩家都喜欢使用腾讯手游助手来玩游戏,然而在玩的时候,难免会遇到一些问题,比如常见的启动时显示内存不足的情况,遇到这样的情况该怎么办呢,其实只需要设置一下即可,本文就给大家带来腾讯手游助手显示内 ...
linux命令框显示中文乱码_CentOS终端命令行显示中文乱码的解决方法
这篇文章主要介绍了CentOS终端命令行显示中文乱码的解决方法,以及测试方法和缺少中文字体时的解决方法,需要的朋友可以参考下安装CentOS的时候选择了中文,结果在终端不能显示中文,都是乱码,解决方 ...

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

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

最新文章

热门文章