设置font-size小于12px

前端css设置font-size小于12px不起效原因

因为 Chrome浏览器做了如下限制：

1. font-size 有一个最小值 12px（不同操作系统、不同语言可能限制不一样），低于 12px 的，一律按 12px 显示。理由是 Chrome 认为低于 12px 的中文对人类是不友好的。
2. 但是允许你把 font-size 设置为 0.

css设置font-size小于12px方法（用css3中的缩放）：

效果：

html:

<div class="demo">
          <span>等于12px时</span>
          <span>小于12px时</span>
        </div>

scss:

 .demo {
    :first-child {
      font-size:12px;
    }
    :last-child {
      color: red;
      display: inline-block;
      font-size:12px;
      -webkit-transform-origin-x: 0; /*缩小后文字居左*/
      -webkit-transform: scale(0.80);   /*关键*/
      transform:scale(0.8);
    }
  }