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

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

作者: October_CanYang | 来源:发表于2021-04-23 10:20 被阅读0次

    让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的字体了。

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/zryfrltx.html