怎么让Chrome支持小于12px 的文字

pax大约 3 分钟

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

在 Chrome 浏览器中，默认情况下最小字体大小被限制为 12px，这是为了保证可访问性和可读性。但有时设计需求需要显示更小的字体，以下是几种解决方案：

方法一：使用 CSS Transform 缩放（推荐）

.small-text {
  font-size: 12px;
  transform: scale(0.8333); /* 10px / 12px = 0.8333 */
  transform-origin: left center;
  display: inline-block;
}

/* 或者使用 scaleY 单独控制垂直缩放 */
.small-text-y {
  font-size: 12px;
  transform: scaleY(0.8333);
  transform-origin: center;
}

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

优点：兼容性好，所有浏览器都支持
缺点：需要计算缩放比例，可能影响布局

方法二：使用 `-webkit-text-size-adjust`

.small-text {
  font-size: 10px;
  -webkit-text-size-adjust: none;
}

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

注意：此属性主要用于移动端，PC端支持有限

方法三：使用 SVG 文本

<svg width="100" height="20">
  <text x="0" y="15" font-size="10" fill="#000">
    这是10px大小的文字
  </text>
</svg>

优点：精确控制字体大小
缺点：不适合大量文本，SEO 不友好

方法四：使用 Canvas 绘制文本

<canvas id="smallTextCanvas" width="200" height="30"></canvas>

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

优点：完全控制字体渲染
缺点：不可选中，SEO 不友好，维护困难

方法五：使用 CSS Zoom（非标准属性）

.small-text {
  font-size: 10px;
  zoom: 0.8333; /* 10px / 12px */
}

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

注意：zoom 是非标准属性，主要在 IE 和 Chrome 中支持

方法六：使用 CSS `zoom` 结合 `font-size-adjust`

.small-text {
  font-size: 12px;
  font-size-adjust: 0.5;
  zoom: 0.8333;
}

方法七：通过 Chrome 设置修改最小字体（用户端）

在 Chrome 地址栏输入：chrome://settings/fonts
找到"最小字体大小"设置
将其设置为更小的值（如 10px 或更小）

注意：这只影响当前用户，不适用于网站访客

方法八：使用 CSS `rem` 单位配合根字体调整

html {
  font-size: 10px; /* 设置根字体大小 */
}

.small-text {
  font-size: 1rem; /* 实际为 10px */
}

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

各方法对比

方法	优点	缺点	兼容性	推荐度
Transform 缩放	兼容性好，精确控制	影响布局，需计算比例	所有现代浏览器	⭐⭐⭐⭐⭐
-webkit-text-size-adjust	简单直接	支持有限	Webkit 浏览器	⭐⭐
SVG 文本	精确控制	不适合大量文本	所有浏览器	⭐⭐
Canvas 绘制	完全控制	不可选中，SEO差	所有浏览器	⭐
Zoom 属性	简单	非标准属性	Chrome/IE	⭐⭐⭐
修改浏览器设置	无需代码修改	仅影响当前用户	-	⭐