瀏覽器可渲染的最小字號為 12px，但設計圖上經常出現小於該值的字型。對於 11px 我往往就按 12px 處理了，可 9px 這樣的超小字號處理成 12px 絕對太不地道啊。大家可能都知道通過 transform: scale(n) 能達到縮小字型的效果，但你沒有發現並非十分好用？
第一個例子：看到紅框內 9px 的小字型了嗎？用 transform: scale(n) 單獨處理這一行，字型被縮小的同時，上下左右間距也被縮小了。那麼問題來了：你能算出縮小處理後多出了多少空白，能知道使用 margin-left 向左折回多少畫素來實現左對齊嗎？顯然不能！
縮小處理後的留白為 (1 - n) * 原尺寸 / 2 畫素。原尺寸是不定的，因為這行文案中的價格不一定總是 4 位數，並且對於不同尺寸的螢幕它的佔比也不同。所以上述方法縮小了字型卻無法實現左對齊。
給大家解釋一下我所述的留白為何：自行看圖領悟。
transform: scale(n) 處理前：
transform: scale(n) 處理後：
第二個例子：文字居中對齊所以左右有多少留白都無所謂了嗎？我開始也這麼認為，然而......
看似沒有問題，其實當該行文字超出限度時，兩端並不能與其它行對齊。原因必然是縮小處理後產生了留白。
下面介紹本人的解決方案：
.tinyscale {
width: 200%;
margin-left: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
複製程式碼在含小字型的佔寬 100% 的父級容器上新增 tinyscale 類，而後將其中所有的尺寸值及間距值乘 2。
縮小為 0.5 倍後：寬度恢復 100%；尺寸值及間距值恢復為所需值。
縮小處理後的留白為 (1 - 0.5) * 200% / 2 即 50%，所以使用 margin-left 向左折回 50% 即可，這樣的處理無需考慮橫向尺寸不固定的問題。
上述方法的缺點是僅適用於定高的情況，因為縱向的折回值若使用百分比其基準值是寬度非高度......
希望大神們留下更好的解決方案，萬分感謝！
2017/05/16 續更
之前說，不定高的情況無法處理。其實對於外層不定高而內部元素定高的情況是可以處理的。舉個例子：
紅框內的所有元素被一個父級元素包裹，該父級元素是定寬的，我們可以對其進行橫向縮放：
.parent {
width: 200%;
margin-left: -50%;
-webkit-transform: scale(0.5, 1);
transform: scale(0.5, 1);
}
複製程式碼而內部元素是定高的假設為 20px，我們可以對其進行縱向縮放，並在縱向使用 margin 折回一個固定值 (1 - 0.5) * 20 / 2 畫素：
.child {
margin: -5px 0;
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
}
複製程式碼對於內部元素高度不確定的情況，暫未思考出解決方案，望大神指導！
作者：呆戀小喵
我的後花園：sunmengyuan.github.io/garden/
我的 github：github.com/sunmengyuan
原文連結：sunmengyuan.github.io/garden/2017…
