瀏覽器可渲染的最小字型大小為 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
複製**
縮小為 0.5 倍後：寬度恢復 100%；尺寸值及間距值恢復為所需值。
縮小處理後的留白為(1 - 0.5) * 200% / 2即 50%，所以使用 margin-left 向左折回 50% 即可，這樣的處理無需考慮橫向尺寸不固定的問題。
上述方法的缺點是僅適用於定高的情況，因為縱向的折回值若使用百分比其基準值是寬度非高度......
希望大神們留下更好的解決方案，萬分感謝！
2017/05/16 續更
之前說，不定高的情況無法處理。其實對於外層不定高而內部元素定高的情況是可以處理的。舉個例子：
紅框內的所有元素被乙個父級元素包裹，該父級元素是定寬的，我們可以對其進行橫向縮放：
.parent
複製**
.child
複製**
我的後花園：sunmengyuan.github.io/garden/
我的 github：github.com/sunmengyuan
12px以下字型顯示問題
剛接到廣告公司出的設計稿，裡面很多內容均是12px以下得字型，現在來總結一下解決辦法，方便以後使用 1.使用png 但是會影響頁面響應速度 2.使用transform scale 0.x 注意此時文字容器 必須是可以設定寬高的,即display屬性 必須是inline block或block 計算公...
讓Chrome顯示12px以下的字型
一般情況下，chrome無法顯示12px以下的字型 凡是小於12px，均以12px來顯示。此時需要設定強制顯示，以顯示10px為例 以12px為單位，10px 12px 0.8333333333333334 在文字所在div等樣式中加入下式即可 webkit transform scale 0.83...
谷歌瀏覽器小字型處理方案即12px以下字型
谷歌程式設計客棧瀏覽器是不支援12px以下小字型的，可能是考慮到使用者體驗吧。複製www.cppcns.com 如下 webkit text size adjust none 程式設計客棧 但是，lwxom自chrome 27之後，就取消了對這個屬性的支援。我們還有其它辦法解決這個問題嗎？谷歌瀏覽器...