谷歌浏览器小字体处理方案即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弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 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实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP图片水印类的封装
2017/07/06 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
在Python中编写数据库模块的教程
2015/04/29 Python
python中模块查找的原理与方法详解
2017/08/11 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
银行爱岗敬业演讲稿
2014/05/05 职场文书
活动倡议书范文
2014/05/13 职场文书
计划生育宣传标语
2014/06/21 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA