谷歌浏览器小字体处理方案即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 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 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 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
用console.table()调试javascript
2014/09/04 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
学习python (2)
2006/10/31 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
交通安全横幅标语
2014/10/07 职场文书
签字仪式主持词
2015/07/03 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
php+laravel 扫码二维码签到功能
2021/05/15 PHP
python异步的ASGI与Fast Api实现
2021/07/16 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python