Chrome和Edge强制将小于12px的font-size提升至12px以保障可访问性，Firefox无此限制但受用户级最小字号设置影响；可通过transform:scale()、SVG文字或图片替代等方法绕过，需注意布局补偿与兼容性。
Chrome 和 Edge 的 12px 最小字号强制限制
Chrome（含基于 Chromium 的 Edge）从很早版本起就对网页中设置的 font-size 施加了默认最小值限制：当 CSS 中声明的字号小于 12px（如 font-size: 10px），浏览器会自动将其提升到 12px 渲染，除非用户主动关闭该策略或站点满足特定条件。
这个限制不是 bug，而是出于可访问性考虑——防止开发者把文字设得过小导致阅读困难。但对 UI 精细控制（比如图标旁的超小标注、数据表格的密排标签）会造成干扰。
- 仅影响实际渲染，
getComputedStyle(el).fontSize仍返回你写的值（如"10px"），容易误判 - 限制作用于所有元素，包括
、、伪元素::before等 - 通过
zoom或transform: scale()缩放容器可绕过，但会连带缩放整个盒模型（padding/margin/border 也缩放）
Firefox 没有全局最小字号限制
Firefox 默认不干预你写的 font-size 值，font-size: 6px 就真按 6px 渲染。这点和 Chrome/Edge 形成鲜明对比。
但要注意：Firefox 有独立的「最小字体大小」用户级设置（在 about:preferences#general → Language and Appearance → Fonts and Colors → Advanced），默认为 0，但如果用户手动调高（比如设为 12px），就会全局生效，且优先级高于页面 CSS。
立即学习“前端免费学习笔记（深入）”；
- 开发者无法通过 CSS 覆盖用户设置的最小字号（这是故意设计的可访问性保障）
- 可通过
document.documentElement.style.fontSize = "6px"动态设置再读取getComputedStyle验证是否被拦截 - 若需兼容 Firefox 用户自定义设置，建议避免依赖极小字号传递关键信息
绕过 Chrome 最小字号的几种实操方式
真要显示小于 12px 的文字（例如图表坐标轴刻度、代码编辑器行号、嵌入式设备 UI），有有限但可用的手段：
- 用
transform: scale(0.8)缩放文字容器：需同步调整transform-origin和外边距补偿，否则布局错位 - 改用 SVG 文字：
abc - 图片替代：对静态、非交互文字（如 logo 角标），生成
@1x/@2xPNG，用background-image插入 - 启用
--disable-font-subpixel-positioning启动参数（仅限桌面端测试环境，不可用于线上）
注意：iOS Safari 和 Android WebView 多数继承 Chromium 行为，同样存在 12px 下限；而旧版 Safari（macOS/iOS）曾有 11px 限制，现也已统一为 12px。
响应式场景下字号适配的隐性风险
用媒体查询写 @media (max-width: 480px) { .label { font-size: 10px; } } 很常见，但在 Chrome 中，这段样式在手机上实际不会生效——它会被截断为 12px，导致视觉密度失控（比如原本紧凑排列的标签突然变松散）。
- 验证方法：在 Chrome DevTools 的 Elements 面板中看 Computed 标签页，
font-size行右侧若出现forced提示，说明被强制提升 - 更稳妥的做法是用
rem+ 根字体缩放（html { font-size: 62.5%; }），再配合transform: scale()局部微调 - 真正需要小字号的组件（如时间戳、状态角标），建议统一抽离为
class="x-small"并在 CSS 中用transform实现，避免分散写死font-size
浏览器对文字大小的干预藏得深，表面只是“显示变大”，背后可能牵扯布局重排、行高塌陷、甚至表单控件对齐异常——别只盯着 font-size 值看，要进 Computed 面板确认真实渲染结果。
