使用-webkit-transform:scale(0.8);可以控制大小，但是transform只能缩放可以定义宽高的元素，所以需要设置一个display:inline-block

调整

2022年08月21日

在没有设置过transform-origin属性时，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点/中心点）位置进行变形的。而CSS3 中的transform-origin属性用于设置旋转元素的基点位置，熟悉使用transform-origin并结合CSS3动画可以使元素沿着某一基点进行旋转，位移等，在进行字体缩放的时候并不需要，
transform-origin在进行字体调整的时候，并没有起到什么作用，还会干扰外部的flex，所以直接去掉，只保留缩放。

span {
    color: #999999;
    font-style: normal;
    display: inline-block;
    transform: scale(0.60);
    -ms-transform: scale(0.60); /* IE 9 */
    -webkit-transform: scale(0.60); /* Safari 和 Chrome */
    -moz-transform: scale(0.60); /* Firefox */
    -o-transform: scale(0.60); /* Opera */
}

代码

em {
    font-size: 12px;
    font-style: normal;
    transform: scale(0.50);
    transform-origin: 0 0;
    -ms-transform: scale(0.50); /* IE 9 */
    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform: scale(0.50); /* Safari 和 Chrome */
    -webkit-transform-origin: 0 0; /* Safari 和 Chrome */
    -moz-transform: scale(0.50); /* Firefox */
    -moz-transform-origin: 0 0; /* Firefox */
    -o-transform: scale(0.50); /* Opera */
    -o-transform-origin: 0 0; /* Opera */
    display: inline-block;
  }