谷歌浏览器小字体处理方案即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实现字体颜色渐变的实现
Mar 09 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 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
建立动态的WML站点(一)
2006/10/09 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
php 浮点数比较方法详解
2017/05/05 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
python 读取数据库并绘图的实例
2019/12/03 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
社区中秋节活动方案
2014/01/29 职场文书
服务宗旨标语
2014/07/01 职场文书
学党史心得体会
2014/09/05 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
如何写辞职信
2015/05/13 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
详解OpenCV曝光融合
2022/04/29 Python