2017年12月4日 星期一

[ HTML ] Chrome 最小字型

但新版 Chrome 已經不支援 -webkit-text-size-adjust
所以目前改用 -webkit-transform 的方式來達到,
使用 transform 要視情況以 display:inline-block 來進行
scale(0.91) 裡面的數值是以 chrome
最小字型 12px 去計算轉換倍率,例如:9px 為
9/12 = 0.75 這樣。

<div style="font-size:18px; "> 18px 字型大小</div>
<div style="font-size:16px; "> 16px 字型大小</div>
<div style="font-size:14px; "> 14px 字型大小</div>
<div style="font-size:12px; "> 12px 字型大小</div>
<div style="font-size:11px; -webkit-transform:scale(0.91); display:inline-block"> 11px 字型大小</div>
<div style="font-size:10px; -webkit-transform:scale(0.83); display:inline-block"> 10px 字型大小</div>
<div style="font-size:9px; -webkit-transform:scale(0.75); display:inline-block"> 9px 字型大小</div>
<div style="font-size:8px; -webkit-transform:scale(0.66); display:inline-block"> 8px 字型大小</div>

18px 字型大小
16px 字型大小
14px 字型大小
12px 字型大小
11px 字型大小
10px 字型大小
9px 字型大小
8px 字型大小