谷歌浏览器小字体处理方案即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 实现侧边栏展开收起动画
Dec 22 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
header跳转和include包含问题详解
2012/09/08 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
Python实现Const详解
2015/01/27 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python定义类self用法实例解析
2020/01/22 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
CSS3实现时间轴特效
2020/11/02 HTML / CSS
公司门卫管理制度
2014/02/01 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
Pandas 数据编码的十种方法
2022/04/20 Python