调 font-size 时需同步调整 line-height、font-weight 等属性，并优先使用 rem/em 单位，配合字体选择、text-shadow 或 clamp() 等手段综合优化视觉粗细表现。
用 font-size 调文字大小，但别只调它
直接改 font-size 是最常见做法，但单纯放大或缩小会导致字体粗细视觉失衡——尤其在 Windows 上用默认 Segoe UI 或 Microsoft YaHei 时，小字号下字体发虚、大字号下笔画糊成一片。这不是 bug，是系统字体渲染机制和 CSS 缺省设置共同作用的结果。
关键不是“调不调”，而是“怎么配着调”：
-
font-size改大小，line-height必须同步微调（通常设为无单位数值，如1.4），否则行距塌陷或撑开，加剧粗细错觉 - 避免用
px固定值批量设文字大小，优先用rem或em，让缩放更可控 - Windows 下可加
-webkit-font-smoothing: antialiased（仅 Chrome/Edge），轻微缓解小字号毛边，但对加粗感帮助有限
粗细失衡时优先检查 font-weight 是否被意外覆盖
很多项目里，全局重置样式（如 * { font-weight: normal !important; }）或第三方 UI 库（如 Ant Design 的 .ant-btn）会强制设 font-weight，导致你调了 font-size 后，字变大但依然“细得发飘”。
排查步骤：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，选中文字元素，看
Computed面板里font-weight实际计算值是不是400（即 normal） - 检查是否被
font简写属性覆盖，比如font: 14px/1.2 "PingFang SC", sans-serif会把font-weight重置为normal - 若需保留粗细，显式声明
font-weight: 500或600，别依赖字体自身 weight 变体
真正解决粗细问题：换字体或启用 font-feature-settings
某些字体（如 system-ui）在不同尺寸下自带光学尺寸适配（optical sizing），但中文基本不支持。可行方案是：
- 用支持多字重的开源字体，例如
Noto Sans CJK SC，并配合@font-face加载weight300–700 多档，再按font-size区间切换font-weight - 对现代浏览器，尝试
font-feature-settings: "wdth" 125;（宽度调节）或"opsz" 24;（光学尺寸，仅部分字体支持），但中文支持极差，慎用 - 最稳妥的“伪粗细”补救：小字号（≤12px）加
text-shadow: 0 0 1px currentColor，大字号（≥20px）加paint-order: stroke fill+stroke-width（需 SVG 文本）
移动端 viewport 缩放会干扰 font-size 渲染
iOS Safari 和部分 Android 浏览器在页面缩放后，会动态调整字体渲染策略，导致同一 font-size 值在缩放前后看起来粗细不同。这不是 CSS 问题，是渲染层干预。
能做的限制动作：
- 在
中禁用用户缩放：user-scalable=no（仅限 WebApp 场景，非通用方案） - 用
min-device-pixel-ratio媒体查询区分高倍屏，对font-size微调 ±0.5px 补偿渲染差异 - 放弃像素级控制，改用
clamp(1rem, 2.5vw, 1.25rem)让字号随视口弹性变化，比硬调更适应设备渲染特性
实际效果差异常藏在字体加载时机、系统字体回退链、甚至 GPU 渲染开关里，调完 font-size 后务必在真机上切几个字号档位肉眼比对，而不是只信开发工具里的预览。
