谷歌浏览器小字体处理方案即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中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 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
数据库的日期格式转换
2006/10/09 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python实现贪吃蛇游戏
2020/03/21 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
配置管理计划的主要内容有哪些
2014/06/20 面试题
职称自我鉴定
2013/10/15 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
答谢酒会主持词
2015/07/02 职场文书
python如何在word中存储本地图片
2021/04/07 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
vue特效之翻牌动画
2022/04/20 Vue.js