让Chrome支持小于12px 的文字方式有哪些?区别?

让Chrome支持小于12px 的文字方式有哪些?区别?


谷歌浏览器Chrome是Webkit的内核,有一个[ -webkit-text-size-adjust ]的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响
CSS样式定义如下:
-webkit-text-size-adjust:none;

但是在最新版的谷歌里。已经不在支持这个属性啦,需要通过css3的transform来解决,方法如下:

css部分
body,p{ margin:0; padding:0;}
p{font-size:10px;}
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block;}
    html布局
<p><span id="span1">我是一个小于12PX的字体</span></p>

解释:

1.//0.8位缩放倍数,具体自己根据实际需求修改,只能缩放可以定义宽高的元素,而span是行内元素,

{webkit-transform:scale(0.8);  display:inline-block} 

为什么定义 display:inline-block而不是 display:block?转为block就独占一行啦,所以转换为inline-block

{-o-transform:scale(1);}

opera现在最新版也是webkit内核,新版本的opera,本来就是10px的字体了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在这一年的工作中,我发现很多问题你利用自己的「聪明才智」绕过去了,总有一天它会和你不期而遇,今天我们就来直面一个字...
    Wendy曹阅读 4,779评论 9 16
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,632评论 1 45
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,540评论 1 19
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,606评论 0 7
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 784评论 0 3