使用em单位设置字体大小异常，求助排查原因

阿华AIGC实验室

2026-5-15

解决浏览器强制显示最小字体的问题

这是因为大多数现代浏览器都自带了默认最小字体大小限制（通常是9px）——哪怕你通过em计算出的字体尺寸更小，浏览器也会强制把文本显示为这个最小值，这也是你在computed面板里看到固定9px的原因。

你的代码里，body { font-size: 0.625em; }是基于浏览器默认16px计算的，所以body实际字体大小是10px；当你给p标签设0.7em时，本该是7px，但因为低于浏览器的9px限制，就被强制提升到了9px。

下面分享几个可行的解决办法：

方法一：临时调整浏览器测试设置
如果你只是自己测试需要看到更小的字体，可以修改浏览器的最小字体限制：比如在Chrome里，进入「设置→外观→自定义字体」，把「最小字体大小」调低（甚至设为0），这样就能看到你设置的实际字体大小了。不过这只是本地测试用，没法控制访问你页面的用户的浏览器设置。

方法二：用CSS transform缩放文本
这是最常用的绕过最小字体限制的方法，通过缩放视觉效果来达到更小的字体，同时不破坏布局逻辑：

body { font-size: 0.625em; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.875em; }
p { 
  font-size: 1em; /* 先继承body的10px */
  transform: scale(0.7); /* 缩放到70%，等效7px */
  transform-origin: left top; /* 确保文本从左上角开始缩放，避免偏移 */
  display: block; /* 保持段落的块级布局 */
  line-height: 1.2; /* 可以调整行高适配缩放后的文本 */
}

方法三：使用视口单位替代em
视口单位（vw/vh）是基于浏览器窗口尺寸计算的，大部分现代浏览器不会对这类单位应用最小字体限制。比如你可以把基准字体设为视口宽度的百分比：
```
body { font-size: 2.5vw; } /* 基于视口宽度，适配不同屏幕 */
h1 { font-size: 2.5em; }
h2 { font-size: 1.875em; }
p { font-size: 0.7em; }
```
这样计算出来的字体大小可以突破9px限制，同时还能随窗口大小自适应。
方法四：直接使用px单位（谨慎选择）
如果你不需要文本通过浏览器的字体缩放功能调整，可以直接用px设置固定大小：
```
body { font-size: 10px; }
h1 { font-size: 25px; }
h2 { font-size: 18.75px; }
p { font-size: 7px; }
```
不过要注意，这种方式会让文本无法被用户通过浏览器的「放大/缩小文本」功能调整，可能影响可访问性。