chrome 强制 font-size ≥12px 是 webkit 行为，transform: scale() 可绕过：需设 font-size 为 12px 再缩放，注意 transform-origin、display 转换、基线偏移及布局泄漏问题。
font-size` 小于 12px 的文本渲染为 12px，这不是 bug，而是 WebKit 内核的默认行为。用 transform: scale() 是目前最可控、无需用户干预、兼容性稳定的视觉绕过方案。
为什么 transform:scale() 能“骗过”Chrome 的最小字号限制
因为 Chrome 的限制只作用于 font-size 计算值，不干预渲染层的几何变换。transform 发生在布局完成之后，浏览器先按 12px（或更大）排版、占位，再缩放像素块——所以它“看起来小了”，但 DOM 和盒模型仍按原始尺寸计算。
- 必须把
font-size设为 ≥12px（推荐固定用 12px），再用scale()缩小，不能直接写font-size: 10px+scale(1) -
scale()值不是随意填的：目标字号 ÷ 12px = 缩放比例（如 10px →scale(0.833)，9px →scale(0.75)） - 缩放后基线偏移明显，
transform-origin推荐设为left top或left bottom，避免和邻近文字对不齐
行内元素用 transform:scale() 必须先转成块级容器
transform 对纯 <span></span>、<a></a> 等行内元素生效，但缩放会导致其脱离正常行高流，上下错位甚至被裁剪。根本原因是行内元素的 transform 不触发新的 BFC，且基线参与 line-height 计算。
- 给元素加
display: inline-block或display: block，再应用transform - 配合
vertical-align: top或bottom手动对齐，比依赖默认基线更可靠 - 若用于按钮内文字，注意
padding和line-height仍需按原始 12px 尺寸设计，否则点击区域会失真
scale 缩放引发的布局泄漏与修复点
缩放不改变盒模型尺寸，但会影响实际渲染占用空间——尤其是当父容器有 overflow: hidden、flex 换行、或相邻元素用 em/rem 依赖字体大小时，容易出现截断、错行、间距突变。
- 缩放后的元素可能溢出父容器，加
overflow: hidden到父级只是掩盖问题，应优先用width/max-width显式约束 - 避免在
flex容器中对子项单独缩放，改用font-size统一调小根字号（html { font-size: 10px }），再用rem控制——更干净 - 如果必须混用缩放文字和正常文字，用
margin-top: -Xpx补偿基线偏移，X 值 ≈ (12px − 目标字号) × 0.3，实测比position: relative更稳定
line-height、text-rendering、硬件加速层）耦合产生的边缘行为。别只盯着 scale() 数值，要盯着它在真实容器里是否“安分”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
