Chrome谷歌浏览器下不支持css字体小于12px的解决办法
2016-09-28 20:31
501 查看
先来看下 ie、火狐、谷歌浏览器下各个字体显示情况
ie下:
火狐下:
谷歌下:
从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px;
那么网上一直有一个方法就是给当前样式添加谷歌私有属性:-webkit-text-size-adjust:none;
可是我进行验证后发现,在谷歌现在的新版本里已经无效。那么我们应该如何设置谷歌下的字体呢?
我们可以使用到 css3里的一个属性:transform:scale()
属性介绍可以戳这里:http://www.w3chtml.com/css3/properties/2d-transform/transform.html
这个属性前给-webkit-谷歌前缀,那么就可以控制字体的大小,代码如下:
如下图:
但是要注意一点,如果这个<p>元素有背景的话,给这个属性会使背景也随着变化,所以,我们可以给<p>标签里再套个<span>
你会发现没有效果,如图:
这是因为transform:scale()这个属性只为可以缩放可以定义宽高的元素,而span是行内元素;
我们可以给span元素定义一个display:block,这样就可以了。
这样在谷歌浏览器下走一遍,字体就能更改了。
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谷歌浏览器下不支持css字体小于12px的解决办法
- 谷歌 字体小于12, Chrome谷歌浏览器下不支持css字体小于12px的解决办法
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法【原创】
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
- CSS3 - chrome,傲游,360极速浏览器不支持小于12px的字号的解决办法
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
- 谷歌浏览器Chrome不再支持showModalDialog的解决办法
- Chrome下font-size小于12px的解决办法
- 谷歌浏览器不支持小于12px的解决方法
- 谷歌浏览器Chrome不再支持showModalDialog的解决办法
- 谷歌浏览器下小于12px字体的解决办法
- 谷歌浏览器Chrome不再支持showModalDialog的解决办法
- 谷歌浏览器Chrome不再支持showModalDialog的解决办法
- 谷歌浏览器Chrome不再支持showModalDialog的解决办法
- Chrome浏览器不支持字体小于12px的解决办法
- EXT复合表头谷歌浏览器Chrome错位解决办法
- Google不支持小于12px字体 终极办法
- 如何让谷歌浏览器支持小于12px的字体