zoukankan      html  css  js  c++  java
  • 【css】怎么让Chrome支持小于12px 的文字


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

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

    css部分 html布局

    body,p{ margin:0; padding:0;}
    p{font-size:10px;}
    span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block;}

    <p><span id="span1">我是一个小于12PX的字体</span></p>

    解释:

    1.{webkit-transform:scale(0.8);  display:inline-block}  //0.8位缩放倍数,具体自己根据实际需求修改,只能缩放可以定义宽高的元素,而span是行内元素,

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

    2.{-o-transform:scale(1);}opera现在最新版也是webkit内核,新版本的opera,本来就是10px的字体了。

    作者:smile.轉角

    QQ:493177502

    作者:smile.轉角
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

    欢迎关注我,一起进步!扫描下方二维码即可加我QQ

  • 相关阅读:
    CCF NOI1032 菱形
    CCF NOI1031 等腰三角形
    CCF NOI1030 角谷猜想
    CCF NOI1029 信息加密
    CCF NOI1028 判断互质
    CCF NOI1027 数字之和
    CCF NOI1026 表演打分
    CCF NOI1025 统计奖牌
    CCF NOI1024 因子个数
    CCF NOI1023 最大跨度
  • 原文地址:https://www.cnblogs.com/websmile/p/5136473.html
Copyright © 2011-2022 走看看