谷歌浏览器小字体处理方案即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实现书本翻页效果的示例代码
Mar 08 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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/10/09 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
Javascript中神奇的this
2016/01/20 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
python中split方法用法分析
2015/04/17 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
Python常用编译器原理及特点解析
2020/03/23 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
python 利用toapi库自动生成api
2020/10/19 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
《寓言两则》教学反思
2014/02/27 职场文书
2014年检验员工作总结
2014/11/19 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers