必须用CSS的font-size属性替代废弃的标签；px最稳妥，em/rem需注意继承关系；排查文字异常优先看Computed面板；警惕系统字体缩放与viewport设置；响应式推荐clamp()或媒体查询。
用 font-size 控制文字大小，别碰
现代 HTML 中， 已被废弃，浏览器可能忽略或渲染异常。必须用 CSS 的 font-size 属性，写在 style 属性里或外部样式表中。
常见写法示例：
正常文字
相对父级放大的标题
-
px最稳妥，适合固定尺寸需求（如 UI 组件内文） -
em和rem更灵活，但依赖父元素或根元素字体设置，改了html或body的font-size会连锁影响所有子元素 - 避免混用单位（比如父级用
rem，子级突然切px），容易导致视觉错乱或响应式失效
文字变小/消失/错位？先查 font-size 是否被覆盖或继承异常
浏览器开发者工具（F12）的「Computed」面板是第一排查入口。点开文字所在元素，看 font-size 实际生效值是不是你写的那个。
- 常见覆盖来源：
user agent stylesheet（如small标签默认font-size: smaller）、CSS 重置库（如 Normalize.css）、框架默认样式（如 Bootstrap 的.text-sm类） - 检查继承链：如果父容器设了
font-size: 0（常用于清除 inline-block 间隙），子元素用em就会变成 0 —— 这是“文字消失”最隐蔽的原因之一 - 注意伪元素：
::before/::after默认不继承font-size，需显式声明
移动端文字忽大忽小？警惕 viewport 缩放和系统字体缩放
不是代码写错了，而是环境干扰。iOS 和 Android 系统允许用户全局放大字体，网页若没适配，16px 可能被强制渲染成 20px+，破坏布局。
立即学习“前端免费学习笔记（深入）”；
- 确保
包含user-scalable=no（慎用）或至少initial-scale=1，否则 iOS Safari 可能自动缩放文本以“提高可读性” - 用
rem+ JS 动态设置根字体时，避开document.documentElement.style.fontSize直接赋值，改用 CSS 自定义属性（--base-font-size）更稳定 - 测试真机：Chrome DevTools 的设备模拟不能完全复现系统字体缩放行为，务必在 iOS「设置→显示与亮度→文字大小」调大后实测
用 calc() 或媒体查询做响应式字号，但别嵌套太深
单纯靠一个 font-size 值撑全场几乎必出问题。合理分层控制才可靠。
- 基础方案：
@media (max-width: 768px) { body { font-size: 14px; } }—— 简单直接，兼容性好 - 进阶方案：
font-size: clamp(14px, 4vw, 18px);—— 浏览器原生响应式字号，但 IE 完全不支持，Edge 16+ 才开始支持 - 避坑点：
calc(1rem + 2px)在某些旧版 Android WebView 中解析失败，建议降级为媒体查询 fallback - 慎用多层
em嵌套：比如div > p > span各设1.2em，三层下来放大 1.728 倍，极易失控
字号调整本质是层级关系和上下文的博弈，改一个值前，先看它在哪条继承链上、被哪些规则包围、运行在什么设备环境里——漏掉任一环，都可能让“调大一点”变成整页错位。
