谷歌浏览器小字体处理方案即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 相关文章推荐
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
css height属性中的calc方法详解
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
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
拖拉表格的JS函数
2008/11/20 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
对javascript继承的理解
2016/10/11 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Django权限机制实现代码详解
2018/02/05 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
PyTorch基本数据类型(一)
2019/05/22 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
Java程序员面试90题
2013/10/19 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
机动车登记业务委托书
2014/10/08 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis