chrome浏览器最小字号解决方案

背景

chrome为了提高用户体验，根据电脑分辨率等条件给浏览器设置了默认的最小字号min px，小于这个字号的字体将仍然使用min px显示

查看chrome浏览器最小字号

浏览器-->设置(settings)-->高级设置(advanced)-->显示(Appearence)-->Customise fonts-->Minimum font size

我这里最小字体是10px，所以5px的字体在个人浏览器中仍然会显示为10px

解决方案

<div class="small-name">
    用户名
</div>
复制代码

css部分

.small-name {
    font-size: 5px;
}
复制代码

将css部分修改成

.small-name {
    -webkit-transform-origin-x: 0;
    transform-origin-x: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    font-size: 10px;
}
复制代码

这个时候全部chrome浏览器都会按照10px的一半，也就是5px来显示。

小问题

按上面的方案解决以后，会发现是整个div都缩小了一半，怎么样使得只有字体缩小呢？

.small-name {
    width: 200%;
    -webkit-transform-origin-x: 0;
    transform-origin-x: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    font-size: 10px;
}
复制代码

将宽度设置为原来的两倍，搞定~