css解决谷歌浏览器字体小于12px方法

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

.small{ 
transform: scale(0.5);
}

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

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

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

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