小于 12px 的字为什么显示不出来？

Chrome 会把较小的字号抬到大约 12px，避免文字不可读。这是浏览器的显示策略，不是 font-size 没写上。需要更小的字时，用 transform: scale() 缩小，并接受可访问性上的代价。

原理

中文页面里这个下限最明显。把 font-size 设成 10px，计算样式可能仍是 10px，画出来却接近 12px。

真正画小的办法是按 12px 排版，再缩放：

css

.tiny {
  font-size: 12px;
  transform: scale(0.83);
  transform-origin: left center;
}

scale 发生在布局之后，元素占的布局尺寸仍是缩放前的。旁边的间距要用负 margin 或让父元素收缩，否则会留出空白。

-webkit-text-size-adjust 影响的是移动端横竖屏时的自动调整，不是这个 12px 下限。不要靠它「允许小字」。

更好的做法是不把正文设到 12px 以下。辅助信息至少让用户能读，并允许页面缩放。

SVG 和图片文字呢？

把文字做成图片能绕过字号下限，但不能选择、不能翻译、放大后会糊。只适合装饰性的极小标记，而且要有替代文本。

缩放之后点击区域变了吗？

视觉变小，布局盒子还是原来的。如果点击热区看起来偏大，那是盒子没跟着变。需要热区和视觉一致时，用实际尺寸布局，而不是只缩放。