谷歌浏览器小字体处理方案即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垂直手风琴菜单
Jun 28 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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分页显示制作详细讲解
2006/12/05 PHP
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
机电一体化应届生求职信范文
2014/01/24 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers