谷歌浏览器小字体处理方案即12px以下字体


Posted in HTML / CSS onDecember 17, 2013

谷歌浏览器是不支持12px以下小字体的,可能是考虑到用户体验吧。
网上也有一些文章介绍,说可以使用:

-webkit-text-size-adjust:none;
但是,自chrome 27之后,就取消了对这个属性的支持。

我们还有其它办法解决这个问题吗?

谷歌浏览器支持CSS缩放,于是,我们可以在这方面做文章:

-webkit-transform: scale(0.5);

既然最小支持到12px,那么就以12px为基点进行缩放,

同时可以使用-webkit-transform-origin-x: 0; 来解决缩放后margin-left的位移问题:

.test_tag{
font-size:12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.5833333333333334);
}
scale值的计算方法为: 7 / 12 = 0.5833333333333334
 
HTML / CSS 相关文章推荐
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 #HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 #HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 #HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 #HTML / CSS
html5教程画矩形代码分享
Dec 04 #HTML / CSS
html5教程制作简单画板代码分享
Dec 04 #HTML / CSS
html5 viewport使用方法示例详解
Dec 02 #HTML / CSS
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
php对数组排序的简单实例
2013/12/25 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
python实现爬虫下载漫画示例
2014/02/16 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python实现代码统计工具
2019/09/19 Python
python中如何使用insert函数
2020/01/09 Python
Python 如何批量更新已安装的库
2020/05/26 Python
大学毕业感言50字
2014/02/07 职场文书
语文教育专业求职信
2014/06/28 职场文书
公务员培的训心得体会
2014/09/01 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
php将xml转化对象的实例详解
2021/11/17 PHP