chrome最小字体限制的问题如何解决？教你两种方法-群英

上一篇：浮动元素出现哪些问题？如何解决？下一篇：css怎样实现类似订单地址下的线条样式?

chrome最小字体限制的问题如何解决？一些朋友可能知道Chrome 默认最小字体是12px，这样的设计也是出于为了更好显示中文，但是这样的设计也有一个坏处，就是可能会出现某些上标、下标字体过大的情况，这对于用户体验并不好，那么我们有没有什么解决方法呢？接下来给大家分享两种方法，感兴趣的朋友可以了解看看。

1-针对谷歌浏览器加前缀进行适配

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

给html标签加上下面一个属性，然而，当我打开浏览器时，发现并没什么用，后来发现这个属性在chrome 27版本以后被废弃了，可真烦呢！

2-利用css3的transform属性

<div class=""small-font>这是一段文字</div>

.mini-font{
  font-size: 12px;
  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.90);
}

这种方法是利用了css3的缩放属性，即：将文字大小整体缩小为原来的0.9倍，但是有一个硬伤，他只是缩小了文字的大小，并不能将文字所占的区域大小缩小，即无法缩小元素的width和height，这就很难受了

3-最终解决办法！！！！从浏览器设置入手

尝试了前2种方法，我发现并没有用，无奈我使用了手机模拟器器进行调试，发现可以将字体设置为10px或者更小，于是乎我就在思考是不是谷歌浏览器本身限制了最小字体大小？？？于是乎，我打开浏览器，开始慢慢摸索，终于找到根治的办法了

1.打开浏览器，找到“设置”

2.搜搜“字体”

3.点击“自定义字体”

4.将“最小字号”改成10px或者更小（建议不要小于8px，不利于阅读）

5.然后，问题就解决啦，其实根本就是谷歌浏览器本身对字体做了最小值限制，因为后来我用ie和火狐浏览器调试的时候，字体是可以设置成10px和8px的，这让我更加怀疑是谷歌浏览器的问题，而不是css代码有问题。

以上就是关于chrome最小字体限制的两种解决方法的介绍啦，需要的朋友可以参考看一下，希望本文对大家有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

标签： chrome最小字体限制

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：浮动元素出现哪些问题？如何解决？下一篇：css怎样实现类似订单地址下的线条样式?