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