浏览器可渲染的最小字号为 12px，但设计图上经常出现小于该值的字体。对于 11px 我往往就按 12px 处理了，可 9px 这样的超小字号处理成 12px 绝对太不地道啊。大家可能都知道通过 transform: scale(n) 能达到缩小字体的效果，但你没有发现并非十分好用？
第一个例子：看到红框内 9px 的小字体了吗？用 transform: scale(n) 单独处理这一行，字体被缩小的同时，上下左右间距也被缩小了。那么问题来了：你能算出缩小处理后多出了多少空白，能知道使用 margin-left 向左折回多少像素来实现左对齐吗？显然不能！
移动端 web 开发中小字号字体处理举例
缩小处理后的留白为 (1 - n) * 原尺寸 / 2 像素。原尺寸是不定的，因为这行文案中的价格不一定总是 4 位数，并且对于不同尺寸的屏幕它的占比也不同。所以上述方法缩小了字体却无法实现左对齐。
给大家解释一下我所述的留白为何：自行看图领悟。
transform: scale(n) 处理前：
transform: scale(n) 处理后：
第二个例子：文字居中对齐所以左右有多少留白都无所谓了吗？我开始也这么认为，然而......
移动端 web 开发中小字号字体处理举例
看似没有问题，其实当该行文字超出限度时，两端并不能与其它行对齐。原因必然是缩小处理后产生了留白。
下面介绍本人的解决方案：
.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 续更
之前说，不定高的情况无法处理。其实对于外层不定高而内部元素定高的情况是可以处理的。举个例子：
移动端 web 开发中小字号字体处理举例
红框内的所有元素被一个父级元素包裹，该父级元素是定宽的，我们可以对其进行横向缩放：
.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/garden/
我的 github：https://github.com/sunmengyuan
原文链接：https://sunmengyuan.github.io/garden/2017/03/01/tinyfont.html
网友评论