css解决谷歌,360浏览器默认最小字体为12px问题

当我们设置前台html页面样式问题字体小于12px;时,会发现不管怎么设置小于12px字体,在谷歌、360浏览器上都不生效。

但在火狐等浏览器上却可以正常设置,当你打开谷歌360的设置后会发现,它们设置的默认最小字体为12px,若小于12px

即不会生效(真坑,但坑有坑的解决办法)。如图所示:

aaarticlea/png;base64,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" alt="" width="496" height="198" />

解决办法:

既然最小支持到12px,那么就以12px为基点进行缩放,即可以使用到 css3里的一个属性:transform:scale(n),n为放大倍数。

具体步骤如下:

<style>
.a{font-size:10px;-webkit-transform:scale(0.8);}/*0.8为缩放的比例大小*/
.b{font-size:8px;}
</style> <span class="a">
<span class="b">我就是要比12px小</span>
</span>

细心的你会发现,我上面代码中写了两个<span>,又对里层的<span>定义了一个class类b,并设置字体大小为想要的大小,其作用是作用于非谷歌,360浏览器的字体大小。

错误之处,还望指正!

上一篇:Initializing connection provider: org.springframework.orm.hibernate3.LocalDataSourceConnectionProvider停住了


下一篇:Java基础知识学习(一)