1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > HTML字体小于12谷歌不兼容 Chrome谷歌浏览器下不支持css字体小于12px的解决办法【原创】...

HTML字体小于12谷歌不兼容 Chrome谷歌浏览器下不支持css字体小于12px的解决办法【原创】...

时间:2020-12-29 11:45:18

相关推荐

HTML字体小于12谷歌不兼容 Chrome谷歌浏览器下不支持css字体小于12px的解决办法【原创】...

先来看下 ie、火狐、谷歌浏览器下各个字体显示情况

ie下:

火狐下:

谷歌下:

从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px;

那么网上一直有一个方法就是给当前样式添加谷歌私有属性:-webkit-text-size-adjust:none;

可是我进行验证后发现,在谷歌现在的新版本里已经无效。那么我们应该如何设置谷歌下的字体呢?

我们可以使用到 css3里的一个属性:transform:scale()

这个属性前给-webkit-谷歌前缀,那么就可以控制字体的大小,代码如下:

p{font-size:10px;-webkit-transform:scale(0.8);}

/*这里的数字0.8,是缩放比例,可以根据情况变化。*/

中梦测试10px

如下图:

但是要注意一点,如果这个

元素有背景的话,给这个属性会使背景也随着变化,所以,我们可以给

标签里再套个

p span{font-size:10px;-webkit-transform:scale(0.8);}

中梦测试10px

你会发现没有效果,如图:

这是因为transform:scale()这个属性只为可以缩放可以定义宽高的元素,而span是行内元素;

我们可以给span元素定义一个display:block,这样就可以了。

p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}

中梦测试10px

这样在谷歌浏览器下走一遍,字体就能更改了。

如有不足,还望补充。

转载时请注明出处及相应链接,本文永久地址:/3642.html

微信打赏

支付宝打赏

感谢您对作者gordon的打赏,我们会更加努力!如果您想成为作者,请点我

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。