浏览器默认字体大小被覆盖主要因html根元素font-size被重设，尤其rem单位依赖此基准；UI框架常主动设html{font-size:14px}覆盖默认16px，用户系统设置或内联样式等更高优先级规则也会干扰。

浏览器默认字体大小怎么被覆盖掉的

网页显示的字体大小不是由 font-size 单独决定的，而是受浏览器根元素 :root 或 html 的 font-size 基准影响，尤其当项目用了 rem 单位时——改错地方，整个界面字体就“纹丝不动”。

• Chrome 默认是 16px，但用户可能在设置里调成 18px 或开启“强制更大字体”，这时 1rem 就不再是 16px
• 很多 UI 框架（如 Ant Design、Element Plus）会主动设置 html { font-size: 14px; }，直接覆盖了浏览器默认
• body { font-size: 100%; } 看似安全，其实只是继承 html 的值，没解决源头

想全局统一改字体大小，该动哪一层

最稳的方式是重置 html 元素的 font-size，而不是在 body 或组件里逐个加 font-size——否则 rem 计算全乱，响应式断点也可能偏移。

• 直接写 html { font-size: 16px !important; } 能生效，但会粗暴忽略用户系统偏好，不推荐
• 更合理的是用媒体查询适配：@media (min-resolution: 2dppx) { html { font-size: 18px; } } 应对高分屏
• 如果项目用 PostCSS 或 CSS-in-JS，可借助 postcss-pxtorem 把 px 自动转 rem，但必须同步配置 rootValue 和实际 html 的 font-size 一致

为什么加了 !important 还是没变

常见于内联样式、CSS-in-JS 动态注入、或框架组件自带的 style 属性——它们的优先级高于普通 CSS 规则，!important 在同级中才起作用。

• React 中 style={{ fontSize: '14px' }} 是内联样式，权重高于外部 CSS，得用 style={{ fontSize: '14px !important' }}（注意引号内写法）
• Vue 的 :style 同理，但需确保字符串拼接正确，比如 :style="{ fontSize: '14px !important' }"
• 某些组件库（如 Vant）把字体写死在 data-v-xxx scoped style 里，得用深度选择器：.my-comp >>> .van-button { font-size: 14px !important; }（Vue 2）或 .my-comp :deep(.van-button) { ... }（Vue 3）

移动端缩放和字体大小冲突怎么办

iOS Safari 对小于 16px 的字体自动放大，这不是 bug，是可访问性保护机制；但会导致布局跳动、按钮文字撑开。

• 加 -webkit-text-size-adjust: 100%; 到 html 或 body 可禁用该行为，但别滥用——它会影响视力障碍用户的缩放体验
• 真正安全的底线是：所有正文文本保持 ≥ 16px，标题可用 em 或 rem 相对放大
• 如果必须用小字号（比如标签、辅助文字），改用 transform: scale(0.8); 配合 transform-origin 控制基点，避开字体渲染干预

改字体不是调一个值的事，关键在理清层级关系：浏览器默认 → html 根尺寸 → rem 基准 → 组件内联样式 → 框架 scoped 规则。漏掉任意一层，都可能让你在开发者工具里反复刷新却看不出变化。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！