小于 12px 字体实现

问题

Chrome 浏览器默认最小字体为 12px，如何显示更小的字体？

解答

方案一：transform scale 缩放

最常用的方案，通过缩放实现小字体效果。

.small-text {
  font-size: 12px;
  /* 缩放到 10px：10 / 12 ≈ 0.833 */
  transform: scale(0.833);
  /* 设置缩放原点为左上角 */
  transform-origin: left top;
  /* 缩放后元素实际占用空间不变，需要配合处理 */
  display: inline-block;
}

<span class="small-text">10px 大小的文字</span>

方案二：封装通用类

/* 10px */
.font-10 {
  font-size: 12px;
  transform: scale(0.833);
  transform-origin: left top;
  display: inline-block;
}

/* 8px */
.font-8 {
  font-size: 12px;
  transform: scale(0.667);
  transform-origin: left top;
  display: inline-block;
}

方案三：SVG 文字

SVG 不受浏览器最小字体限制。

<svg width="100" height="20">
  <text x="0" y="10" font-size="10">10px SVG 文字</text>
</svg>

方案四：Canvas 绘制

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Canvas 不受最小字体限制
ctx.font = '8px Arial';
ctx.fillText('8px 文字', 10, 20);

处理缩放后的布局问题

transform 缩放不会改变元素的实际占用空间，可能导致布局问题。

.small-text-wrapper {
  /* 容器设置实际需要的高度 */
  height: 10px;
  line-height: 10px;
}

.small-text {
  font-size: 12px;
  transform: scale(0.833);
  transform-origin: left top;
  display: inline-block;
  /* 或者用负 margin 修正 */
}

关键点

• Chrome 最小字体 12px 是浏览器限制，非 CSS 标准
• transform: scale() 是最常用方案，注意设置 transform-origin
• 缩放不改变元素占用空间，需要额外处理布局
• SVG 和 Canvas 不受最小字体限制
• -webkit-text-size-adjust: none 已废弃，不要使用