应统一用 rem 配合动态设置 document.documentElement.style.fontSize 控制全局文字，避免直接改 body 或标签 font-size；Vue/React 需适配 SSR 和 resize 节流；组件库优先用主题 token；须兼容系统缩放与 DPR。
用 rem 配合根元素字体大小统一控制全局文字
直接改 或每个标签的 font-size 会失控，尤其在响应式或框架（如 Vue/React 项目）中。主流做法是把所有文字单位设为 rem，再动态调 document.documentElement.style.fontSize。
常见错误：只设了 html { font-size: 16px } 却没配合 JS 动态适配，导致在 iPad 或高 DPR 屏上文字过小；或在移动端误用 em 导致嵌套放大。
- Vue 项目可在
main.js或app.vue的mounted中执行一次初始化：document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px';
（以 375px 设计稿为基准） - React 项目建议封装成自定义 Hook，监听
resize并节流，避免频繁重排 - Next.js / Nuxt 等 SSR 框架需注意：服务端无
window，必须加if (typeof window !== 'undefined')守卫
框架内别硬写 style="font-size: 14px" —— 优先走主题变量或 CSS-in-JS 配置
像 Ant Design、Element Plus、Chakra UI 这类组件库，文字大小由主题系统统一管理。手动内联样式不仅覆盖困难，还会在暗色模式、缩放切换时失效。
典型问题：开发者发现按钮文字太小，就给 加 style，结果表格里的同名按钮没变，排查半天才发现是组件内部用了 token.fontSizeSM。
立即学习“前端免费学习笔记（深入）”；
- Ant Design v5+：修改
theme配置中的fontSize和fontSizeLG，全量生效 - Chakra UI：在
theme.fontSizes中定义层级（如sm: '12px', md: '14px'），组件通过fontSize="md"引用 - 未封装的项目：至少提取一个
const FONT_SIZES = { xs: '12px', sm: '14px', ... }对象，禁止散落的像素值
浏览器缩放和系统字体设置会影响实际渲染，px 不等于绝对像素
用户把系统字体调到「较大」，或浏览器缩放设为 125%，16px 文字可能渲染成 20px。此时若用 px 写死，UI 会挤压或错位，尤其表单控件和行高计算。
真实踩坑场景：后台系统要求「必须 14px 字体」，结果在 macOS Safari 下用户开启「增强对比度」后，文字被强制放大，按钮文字溢出。
- 对可读性敏感的场景（如政务、医疗系统），应允许用户通过配置开关切换「适配系统缩放」或「强制固定尺寸」
- 用
calc(1rem * 0.875)替代14px，既保持相对性，又便于后期批量调整比例 - 测试阶段务必在 Windows「显示设置→缩放与布局」和 macOS「辅助功能→显示→更大字体」下验证文字截断和换行
全局文字不是调一个属性就能搞定的事。最易忽略的是 SSR 环境下的首次渲染时机、系统级缩放对 rem 基准的影响，以及组件库主题和自定义样式的优先级冲突。动手前先确认你用的是哪一层控制权——是 CSS 变量？JS 动态根字号？还是框架主题 token？选错层，改十次也不见效。
