论低于 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...