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

心不动则不痛 提交于 2020-03-21 15:58:13

转自:https://www.cnblogs.com/jiangxiaobo/p/5669976.html

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

ie下:

火狐下:

谷歌下:

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

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

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

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

属性介绍可以戳这里:http://www.w3chtml.com/css3/properties/2d-transform/transform.html

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

 

1

2

3

4

5

6

7

<style>

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

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

</style>

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

 

如下图:

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

 

1

2

3

4

<style>

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

</style>

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

 

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

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

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

 

1

2

3

4

<style>

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

</style>

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

 

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

如有不足,还望补充。

番外篇:

中文版的chrome有个12px字体限制的问题,就是当字体小于12px时候都以12px来显示,这个问题在中文网站中并不突出,因为中文字体为了显示清晰一般都定义为大于或等于12px,但如果是一些英文网站那就不好说了,这时12px的限制就会破坏页面的美感,甚至因为文字变大而导致页面变形。

 

可以使用Webkit 的内核的 -webkit-text-size-adjust 的私有 CSS 属性来解决,比如下面的代码就可以成功的解决,通过它即可实现字体大小不随终端设备或浏览器影响。样式定义如下:

#chrome10px{ -webkit-text-size-adjust:none; font-size:10px; }

只要 加了 -webkit-text-size-adjust:none; 字体大小 就不受限制了。

 

但是,在chrome更新到27版本之后就不可以用了。

那此时应该怎么办呢?想一想,还是有办法解决的。

 

chrome是支持css3的。那么我们是否可以写,

 

-webkit-transform : scale()  方法来解决呢?

 

因为ie是支持12号及以下字号的。

font-size : 12px;

-webkit-transform : scale(0.84,0.84) ;

*font-size:10px;

 

虽然有一点差距。不能精确到小数点后两位。。但是已经很好了。可以凑合用了。

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

ie下:

火狐下:

谷歌下:

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

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

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

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

属性介绍可以戳这里:http://www.w3chtml.com/css3/properties/2d-transform/transform.html

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

 

1

2

3

4

5

6

7

<style>

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

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

</style>

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

 

如下图:

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

 

1

2

3

4

<style>

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

</style>

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

 

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

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

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

 

1

2

3

4

<style>

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

</style>

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

 

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

如有不足,还望补充。

番外篇:

中文版的chrome有个12px字体限制的问题,就是当字体小于12px时候都以12px来显示,这个问题在中文网站中并不突出,因为中文字体为了显示清晰一般都定义为大于或等于12px,但如果是一些英文网站那就不好说了,这时12px的限制就会破坏页面的美感,甚至因为文字变大而导致页面变形。

 

可以使用Webkit 的内核的 -webkit-text-size-adjust 的私有 CSS 属性来解决,比如下面的代码就可以成功的解决,通过它即可实现字体大小不随终端设备或浏览器影响。样式定义如下:

#chrome10px{ -webkit-text-size-adjust:none; font-size:10px; }

只要 加了 -webkit-text-size-adjust:none; 字体大小 就不受限制了。

 

但是,在chrome更新到27版本之后就不可以用了。

那此时应该怎么办呢?想一想,还是有办法解决的。

 

chrome是支持css3的。那么我们是否可以写,

 

-webkit-transform : scale()  方法来解决呢?

 

因为ie是支持12号及以下字号的。

font-size : 12px;

-webkit-transform : scale(0.84,0.84) ;

*font-size:10px;

 

虽然有一点差距。不能精确到小数点后两位。。但是已经很好了。可以凑合用了。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!