阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      怎么让Chrome支持小于12px 的文字?

      html, body {-webkit-text-size-adjust: none;}
      

      新版的chrome已经取消了;

      CSS3有个新的属性transform,而我们用到的就是transform:scale()

      p{font-size:10px;-webkit-transform:scale(0.8);}
      

      但是,如果,这个属性会把整个p的属性都缩放。如果我有背景呢?我有边框呢?都会被缩小!

      所以我们修改结构为

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

      代码如下

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

      定义 display:inline-block而不是 display:block;会发现。

      会存在一定的边距。貌似margin或者padding的间距。

      这就是缩放存在问题。原来的位置还占有12px字体的大小。

      所以,要对应修改margin了。定义为负的。

      还有一个网上别人分享的方法;

      html {font-size: 625%;}
      body {font-size: 0.16rem;}
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      本文目录
      目录