写了 font-size 没反应最常见的原因是选择器权重不足或被更高优先级规则覆盖，需用开发者工具的「Computed」和「Styles」面板定位生效规则，并检查单位、继承、viewport 设置及 scoped 样式影响。
直接用 font-size 就能调，但失败往往不是因为不会写，而是被 css 层叠、继承、单位混用或浏览器默认样式拖了后腿。
为什么写了 font-size 没反应？
最常见原因是选择器权重不够，或者样式被更高优先级规则覆盖。比如你在
上写了
内联样式、
移动端
.text { font-size: 16px; }，但页面里同时存在 body * { font-size: 14px !important; }，那你的设置就无效。- 用浏览器开发者工具（F12）点中文字元素，看「Computed」面板里
font-size最终值是多少，再点「Styles」看哪条规则胜出了 - 检查是否误用了 ID 选择器拼写错误，比如把
#content写成#contnet - 留意是否在父元素上设了
font-size: 0;（常见于清除 inline-block 间隙），子元素用em或rem就会变成 0
px、em、rem、% 到底该选哪个？
单位选错是隐形失败高发区。不是“哪个高级”，而是“哪个符合当前场景”：
-
px：最直白，不随父级变，适合固定字号的按钮、图标标注等；但缩放无障碍访问支持弱 -
em：相对于**父元素**的font-size，嵌套深时容易失控（比如父 16px → 子 1.2em = 19.2px → 孙再 1.2em = 23.04px） -
rem：始终相对于根元素（html）的font-size，推荐用于响应式排版；但要注意有些老项目根元素被 js 动态改过，比如document.documentElement.style.fontSize = '62.5%';，此时1.6rem≠16px -
%：和em行为一致（相对于父），但语义更模糊，现在少用
内联样式、
你以为加了 !important 就稳了？不一定。真实失败案例里，经常是样式表加载顺序或作用域搞错了：
立即学习“前端免费学习笔记（深入）”；
- 外部 CSS 文件里写了
p { font-size: 18px; }，但 HTML 里，内联样式优先级更高，结果文字反而变小了 - vue/react 组件中用了 scoped style，
.title { font-size: 20px; }实际编译成.title[data-v-xxx] { ... }，如果父组件也设了同名类且没 scoped，就可能漏掉 - 使用了 CSS-in-JS（如 styled-components），
font-size被包裹在动态生成的 class 里，调试时看不到原始写法，容易误判
移动端 viewport 导致文字“看起来”没变大
在 ios safari 或某些安卓浏览器上，即使你写了 font-size: 24px;，页面一缩放或横屏，文字可能被强制重排——这不是你的 CSS 失效，而是浏览器的「可读性优化」在作怪。
- 检查
是否缺失或写成了user-scalable=no - 加一行
-webkit-text-size-adjust: 100%;（现代浏览器已支持无前缀text-size-adjust: 100%），禁止浏览器自作主张放大文本 - 注意：这个属性只对「非用户主动缩放」生效，不能替代响应式字体方案（如 clamp()）
真正卡住人的，往往不是「怎么设字号」，而是不知道该去哪查、谁覆盖了它、单位在谁的上下文里算——多看 Computed 面板，少猜。