小于12px字体的实现

  采用缩放方案,被缩放的标签仍然会占据缩放前的空间,垂直方向可以通过设置
line-height: 1;去掉本来空间,再调整上下边距,而横向可以通过调整margin为负值或其它办法去解决。

示例代码

.font-size-8 {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  -webkit-text-size-adjust: none;
  -webkit-transform: scale(0.666, 0.666);
}

.font-size-9 {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  -webkit-text-size-adjust: none;
  -webkit-transform: scale(0.75, 0.75);
}

.font-size-10 {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  -webkit-text-size-adjust: none;
  -webkit-transform: scale(0.833, 0.833);
}

.font-size-11 {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  -webkit-text-size-adjust: none;
  -webkit-transform: scale(0.916, 0.916);
}
    原文作者:Eleven
    原文地址: https://segmentfault.com/a/1190000020238095
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞