应使用 CSS 的 font-size 属性替代已废弃的 标签；推荐 rem、clamp() 等响应式单位，避免 px 固定尺寸及 zoom/transform 伪缩放，确保可访问性与继承可控。
直接用 font-size 而不是
HTML5 已彻底废弃 标签，用它不仅无效（现代浏览器会忽略），还会让代码无法通过验证。所有文字大小控制必须走 CSS：font-size 是唯一正解。
常见错误包括：在 里嵌 ，或以为 size 属性还能起作用。实际中，font-size: 16px、font-size: 1.2em、font-size: clamp(1rem, 2.5vw, 1.5rem) 才是有效写法。
- 绝对单位（
px）适合固定尺寸场景，但不利于缩放和无障碍访问 - 相对单位（
em、rem）更推荐，尤其rem基于根元素，层级清晰 -
clamp()可同时兼顾最小、适配、最大三态，响应式排版首选
font-size 在继承链中被意外覆盖
文字大小默认继承父级，但容易被多层 CSS 规则干扰。比如给 设了 font-size: 14px，又在某个组件里写了 .card { font-size: 0.9em }，结果内部所有子元素都按 14px × 0.9 = 12.6px 渲染——连 也变小了，而你本意只是调卡片正文。
解决方法不是“一层层加 !important”，而是明确控制作用域：
立即学习“前端免费学习笔记（深入）”；
- 用
rem替代em，避免嵌套放大/缩小 - 对标题等语义化元素，单独重置：
h2 { font-size: 1.5rem; }，不依赖父级 - 检查开发者工具的“Computed”面板，看
font-size最终值从哪条规则来
移动端用 px 导致文字过小或缩放失效
很多老项目在 @media 里写 font-size: 12px 应对小屏，结果 iOS Safari 默认禁用用户缩放（user-scalable=no 或 viewport 缩放限制），加上固定 px，视障用户双指放大直接失灵。
正确做法是保留缩放能力 + 弹性基础：
- viewport 设置别锁死：
（去掉user-scalable=no） - 根字体设为相对值：
html { font-size: 100%; }或font-size: clamp(1rem, 1.25vw, 1.2rem); - 所有子元素用
rem，确保随系统字号变化联动
用 zoom 或 transform: scale() 伪调文字大小
zoom 是 IE 私有属性，Chrome 虽曾支持但已弃用；transform: scale() 看似能“放大文字”，实则只做视觉缩放，布局空间不变，会导致文字溢出、点击区域错位、屏幕阅读器读取原始字号。
这类操作本质是 hack，不是排版。真正要调大小，就该动 font-size，而不是绕开它去“糊弄渲染层”。
如果真需要整体缩放（如仪表盘模式），应配合 CSS 自定义属性 + JS 切换根字号：document.documentElement.style.fontSize = '18px';，再让所有 rem 自动响应。
