論低於 12px 字型處理方案

呆戀小喵_sunmy發表於2018-07-13

瀏覽器可渲染的最小字號為 12px,但設計圖上經常出現小於該值的字型。對於 11px 我往往就按 12px 處理了,可 9px 這樣的超小字號處理成 12px 絕對太不地道啊。大家可能都知道通過 transform: scale(n) 能達到縮小字型的效果,但你沒有發現並非十分好用?

第一個例子:看到紅框內 9px 的小字型了嗎?用 transform: scale(n) 單獨處理這一行,字型被縮小的同時,上下左右間距也被縮小了。那麼問題來了:你能算出縮小處理後多出了多少空白,能知道使用 margin-left 向左折回多少畫素來實現左對齊嗎?顯然不能!

論低於 12px 字型處理方案

縮小處理後的留白為 (1 - n) * 原尺寸 / 2 畫素。原尺寸是不定的,因為這行文案中的價格不一定總是 4 位數,並且對於不同尺寸的螢幕它的佔比也不同。所以上述方法縮小了字型卻無法實現左對齊。

給大家解釋一下我所述的留白為何:自行看圖領悟。

transform: scale(n) 處理前:

論低於 12px 字型處理方案

transform: scale(n) 處理後:

論低於 12px 字型處理方案


第二個例子:文字居中對齊所以左右有多少留白都無所謂了嗎?我開始也這麼認為,然而......

論低於 12px 字型處理方案

看似沒有問題,其實當該行文字超出限度時,兩端並不能與其它行對齊。原因必然是縮小處理後產生了留白。

論低於 12px 字型處理方案


下面介紹本人的解決方案:

.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 續更

之前說,不定高的情況無法處理。其實對於外層不定高而內部元素定高的情況是可以處理的。舉個例子:

論低於 12px 字型處理方案

紅框內的所有元素被一個父級元素包裹,該父級元素是定寬的,我們可以對其進行橫向縮放:

.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…

論低於 12px 字型處理方案

相關文章