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

时间: 2015-09-04 / 分类: wordpress / 浏览次数: 2,249 views / 0个评论 发表评论

谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px;

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

 

在谷歌现在的新版本里已经无效。那么我们应该如何设置谷歌下的字体呢?

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

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

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

<style>

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

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

</style>

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

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

<style>

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

</style>

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

你会发现没有效果

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

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

<style>

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

</style>

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

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

发表评论

你必须 登录后 才能留言!