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;
}
複製代碼

將寬度設置爲原來的兩倍，搞定~