让Chrome 支持小于12px的文字方式

如何让 Chrome 支持小于 12px 的文字？

1. Zoom（非标属性）

有兼容问题，缩放会改变元素占据的空间大小，触发重排。

2. -webkit-transform: scale()

大部分现代浏览器支持，并且对英文、数字、中文都能够生效，缩放不会改变元素占据的空间大小，页面布局不会发生变化。

注意的是，使用 scale 属性只对可以定义宽高的元素生效，所以下面代码中将 span 元素转为行内块元素：

.small-font {
    display: inline-block;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

补充：

• 用 transform: scale() 缩放后，元素的视觉尺寸变小但 布局尺寸没变，所以可能出现"留白"和"文字截断"。可以配合 transform-origin: left center 配合负 margin 调整位置。
• 现在 Chrome 27+ 起 -webkit-text-size-adjust 已不再支持缩小字号（仅 Android Chrome 仍生效），所以小字号普遍只能走 transform 或 SVG。
• 若只关心 Chrome，可以直接设置 font-size: 1px 配合 transform: scale(0.0833)；更现代的方案是用 SVG 文本或图片，避免浏览器最小字号限制。