塑料材质Chrome的最⼩字体12px限制最终解决办法最近⽤浏览器开发h5 app时碰到⼀个问题
我设置的字体是10px，但是打开浏览器控制台时，⼀直是12px
⽆论改成什么值，只要⼩于12px就是12px
落红不是无情物下一句开发Hybid App的时候也被它困扰了很久，在百度上查了很久，⽹上所有的解决⽅案都惊奇地相似，只有下⾯两种：
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或者更⼩，于是乎我就在思考是不是⾕歌浏览器本⾝限制了最⼩字体⼤⼩于是乎，我打开浏览器，开始慢慢摸索，终于到根治的办法了
因为⾕歌浏览器⾥⾯限制了使⽤⼿机模式调试的时候最⼩字体是12px，但是使⽤真机调试的时候是没有限制的。
1.打开浏览器，到“设置”
2.搜搜“字体”
3.点击“⾃定义字体”
4.将“最⼩字号”改成10px或者更⼩（建议不要⼩于8px，不利于阅读）
5.然后，问题就解决啦，其实根本就是⾕歌浏览器本⾝对字体做了最⼩值限制，因为后来我⽤ie和⽕狐浏览器调试的时候，字体是可以设置成10px和8px的，这让我更加怀疑是⾕歌浏览器的问题，⽽不是css代码有问题。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论