css3缩放-解决后端浏览器字体大于12px的问题

在做项目的时候，UI设计的字体是10px。 当我看效果图时，发现字体总是很大。 当我把它改成12px时，字体还是那么大。 为了看得清楚，最小设置为12px。 该怎么办？ 设计是10px？

最终效果图如下：

在百度，网上的前辈说transform:scale(0.5)就可以满足要求。 使用时发现整个div的宽高都缩放了，不符合要求。

反之，可以将红点和文字放在两个div上，红点控制宽度和高度，并且可以使用transform:scale缩小字体大小来满足需要。

具体实现代码如下：

=1" class="cartData">
     
=1&&cartNum{{cartNum}}
     
99">99+

css部分：
.cartData{
    height: .75rem;
    min-width: .75rem;
    border-radius: .375rem;
    background: red;
    color: white;
    text-align: center;
    line-height: .75rem;
  }
  .Num{
    font-size: 20px;
    -webkit-transform: scale(0.5);
    }

上面的字体是14*0.8 = 11.2px，可以根据需要调整。

仅仅这样写是无法兼容IE和FF的css3缩放css3缩放，所以给出另一种兼容方法：

.Num{
    font-size: 14px;
    -webkit-transform: scale(0.8);
 }
.Numsize-font{
  font-size: 14*0.8px;
}

注意：transform:scale()属性只能缩放可以定义宽度和高度的元素，而内联元素没有宽度和高度，我们可以添加一个display:inline-block;