css解决字体小于12px方法

方法一:利用 transform: scale();缩放字体

.text{ 
font-size: 18px;//实际9px
transform: scale(0.5);
-webkit-transform: scale(0.5);
}

这个方法有个不好的地方就是缩放会把[基线]位置与其他正常排版不一致，导致往往需要利用position: absolute;来调试使其与其他排版保持基线一致。

方法二:利用font-variant-caps:all-small-caps;

.text{
  font-size: 18px;
  font-variant-caps:all-small-caps;
}
@-moz-document url-prefix() {  //为了兼容火狐下font-variant-caps失效
  .text{
    font-size: 9px !important;
  }
}

这个方法就不会导致基线不一致问题,但是也需要注意一点，它会将代码中的英文小写字体强制转化成大写。如果你的代码中不会出现英文内容那就可以放心使用。

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

推荐阅读更多精彩内容