让 Chrome 支持小于 12px 的文字方式有哪些？区别？

问题解析

Chrome 浏览器默认最小字号为 12px，这是为了中文阅读体验。但在某些设计场景（如标签、注释）中可能需要更小的文字。面试考察这个问题，是想要了解候选人对浏览器特性和 CSS 缩放技术的掌握。

解决方案

1. zoom 缩放（非标准属性）

.small-text {
  font-size: 12px;
  zoom: 0.75;           /* 12px × 0.75 = 9px 效果 */
}

特点：

缩放整个元素（包括内部所有内容）
改变元素占据的空间大小
非标准属性，有兼容性问题

<span class="small-text">这是 9px 效果的文字</span>
<span class="normal-text">这是正常文字</span>

2. transform: scale()（推荐）

.small-text {
  font-size: 12px;
  display: inline-block;     /* 必须是块级或行内块 */
  transform: scale(0.75);
  transform-origin: left center;  /* 调整缩放原点 */
}

特点：

视觉缩放，不改变占据空间
标准属性，现代浏览器支持好
需要处理 inline 元素的 transform 问题

处理空白间隙：

.scale-wrapper {
  font-size: 0;              /* 消除 inline-block 间隙 */
}

.small-text {
  font-size: 12px;
  display: inline-block;
  transform: scale(0.75);
  transform-origin: left top;
  width: 133.33%;            /* 补偿宽度，避免换行 */
}

3. -webkit-text-size-adjust（已废弃）

/* 全局设置（不推荐） */
html {
  -webkit-text-size-adjust: none;
}

/* 单独设置 */
.small-text {
  -webkit-text-size-adjust: none;
  font-size: 10px;
}

特点：

Chrome 27 之前有效
新版 Chrome 已不再支持
影响用户缩放网页的体验

4. SVG 方案

<svg width="100" height="20" viewBox="0 0 100 20">
  <text x="0" y="15" font-size="10">小字体文字</text>
</svg>

特点：

可以精确控制字体大小
适合特殊场景（如图表、图标）
维护成本高

5. Canvas 方案

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '10px Arial';
ctx.fillText('小字体文字', 10, 20);

特点：

像素级控制
不可选中和复制
不适合大段文字

方案对比

方案	是否标准	兼容性	是否改变布局	推荐指数
zoom	❌	IE 不支持	是	⭐⭐
transform: scale()	✅	现代浏览器	否	⭐⭐⭐⭐⭐
-webkit-text-size-adjust	❌	Chrome 27+ 无效	-	⭐
SVG	✅	好	否	⭐⭐⭐
Canvas	✅	好	-	⭐⭐

深入理解

transform: scale() 的注意事项

.scale-text {
  font-size: 12px;
  display: inline-block;
  transform: scale(calc(10 / 12));  /* 想要 10px 效果 */
  transform-origin: 0 50%;
}

/* 问题：可能导致模糊 */
/* 解决：使用奇数倍或避免小数 */

模糊问题：

当缩放比例导致非整数像素时，文字可能模糊。

/* 推荐：计算合适的尺寸 */
.small-text {
  font-size: 16px;           /* 基础字体稍大 */
  transform: scale(0.625);   /* 16 × 0.625 = 10 */
}

实际应用组件

/* 可复用的缩放文字组件 */
.text-xs {
  font-size: 12px;
  display: inline-block;
  transform: scale(calc(10 / 12));
  transform-origin: left center;
}

.text-xxs {
  font-size: 12px;
  display: inline-block;
  transform: scale(0.75);   /* 9px */
  transform-origin: left center;
}

/* 块级版本 */
.block-scale {
  font-size: 12px;
  transform: scale(0.833);  /* 10px */
  transform-origin: left top;
  margin-bottom: -2px;      /* 补偿底部空白 */
}

React/Vue 组件封装

// React 组件
function SmallText({ children, size = 10, baseSize = 12 }) {
  const scale = size / baseSize;

  return (
    <span
      style={{
        fontSize: baseSize,
        display: 'inline-block',
        transform: `scale(${scale})`,
        transformOrigin: 'left center',
      }}
    >
      {children}
    </span>
  );
}

// 使用
<SmallText size={10}>小字体</SmallText>

最佳实践

1. 优先使用标准方案

/* 推荐 */
.small-text {
  font-size: 12px;
  transform: scale(0.833);
  display: inline-block;
}

/* 不推荐 */
.small-text {
  zoom: 0.833;           /* 非标准 */
}

2. 考虑可访问性

@media (prefers-reduced-motion: reduce) {
  .small-text {
    transform: none;
    font-size: 12px;     /* 保持可读的最小尺寸 */
  }
}

3. 设计系统建议

/* 定义统一的超小字体 */
:root {
  --font-size-xs: 12px;
  --font-size-scale-xs: 0.833;   /* 10px */
  --font-size-scale-xxs: 0.75;   /* 9px */
}

.text-10 {
  font-size: var(--font-size-xs);
  transform: scale(var(--font-size-scale-xs));
  display: inline-block;
}

.text-9 {
  font-size: var(--font-size-xs);
  transform: scale(var(--font-size-scale-xxs));
  display: inline-block;
}

4. 评估是否真的需要

在设计系统评审时，应该质疑小于 12px 的设计：

是否影响可读性？
是否满足无障碍标准（WCAG 要求最小 12px）？
是否可以通过其他方式（颜色、间距）区分层级？

面试要点

知道 Chrome 最小字号限制的原因（中文阅读体验）
能够说出 zoom 和 transform: scale() 的区别
了解 transform: scale() 的注意事项（inline-block、transform-origin）
知道 -webkit-text-size-adjust 已废弃
了解各方案的兼容性和标准性
能够根据场景选择最合适的方案