css 解决谷歌浏览器字体最小12px大小

css yekong 1246℃

使用-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;
  }
喜欢 (0)