Chrome谷歌浏览器下不支持css字体小于12px的解决办法

最新推荐文章于 2024-06-12 12:57:35 发布

weixin_30361641

最新推荐文章于 2024-06-12 12:57:35 发布

阅读量304

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiao-jie/p/4599450.html

本文探讨了在谷歌浏览器中调整字体大小的方法，通过使用CSS3的transform属性结合谷歌私有前缀-webkit-，实现对字体大小的精确控制。文章详细介绍了此方法的应用步骤，并提供了实例代码演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

ie下：

火狐下：

谷歌下：

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

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

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

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

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

<style>

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

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

</style>

<p>中梦测试10px</p>

如下图：

但是要注意一点，如果这个<p>元素有背景的话，给这个属性会使背景也随着变化，所以，我们可以给<p>标签里再套个<span>

1 <style>
2 p span{font-size:10px;-webkit-transform:scale(0.8);}
3 </style>
4 
5 <p><span>中梦测试10px</span></p>

你会发现没有效果，如图：

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

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

1 <style>
2 p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
3 </style>
4 
5 <p><span>中梦测试10px</span></p>

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

转载于:https://www.cnblogs.com/xiao-jie/p/4599450.html