chrome瀏覽器最小字號解決方案

深藍一人發表於2017-12-14
Chrome瀏覽器

背景

chrome為了提升使用者體驗，根據電腦解析度等條件給瀏覽器設定了預設的最小字號min px，小於這個字號的字型將仍然使用min px顯示

檢視chrome瀏覽器最小字號

瀏覽器-->設定(settings)-->高階設定(advanced)-->顯示(Appearence)-->Customise fonts-->Minimum font size

chrome瀏覽器最小字號解決方案

chrome瀏覽器最小字號解決方案

我這裡最小字型是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;
}
複製程式碼

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

相關文章