論低於 12px 字體處理方案

瀏覽器可渲染的最小字號爲 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);
}

對於內部元素高度不肯定的狀況，暫未思考出解決方案，望大神指導！

---

做者：呆戀小喵

個人後花園：https://sunmengyuan.github.io...

個人 github：https://github.com/sunmengyuan

原文連接：https://sunmengyuan.github.io...