font-family需按优先级写真实存在的字体名，中文字体名必须加英文引号；font-size受继承和单位影响，推荐clamp()实现流体字号；line-height用无单位数值最安全；font-weight须确认字体实际支持的字重。
font-family 怎么写才真正生效
浏览器不会照单全收你写的字体名，它只认系统里真实存在的字体，而且顺序决定 fallback 行为。font-family 是一个优先级队列，不是“选一个就行”。
常见错误：直接写 "微软雅黑, sans-serif"，但没加引号包裹含空格的中文字体名；或把英文名写成 "Microsoft YaHei" 却忘了 Windows 下实际加载的是 "Microsoft YaHei UI"（Win10+ 默认）。
实操建议：
- 中文字体名必须用英文引号包裹：
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - Mac 和 Windows 字体名不一致，别指望单个名字跨平台生效
- 避免用
font-family: "宋体"—— 系统可能映射到"SimSun"或"NSimSun"，渲染效果不稳定 - 想保底可用
system-ui，它会自动匹配当前系统默认 UI 字体（iOS/macOS/Android/Windows 都支持）
font-size 设置后为什么没变大变小
最常见原因是继承、重置或单位理解偏差。CSS 的 font-size 不是绝对像素值，它受父元素影响，尤其在使用 em 或 rem 时。
立即学习“前端免费学习笔记（深入）”；
典型现象：写了 font-size: 20px 却没变化；或用了 1.5em，结果在不同嵌套层级下大小飘忽不定。
实操建议：
- 检查是否被更高优先级样式覆盖（比如
!important、内联样式、或更具体的 CSS 选择器） -
em相对父元素，rem相对根元素（html），调试时可临时加border看盒模型是否意外撑开 - 移动端慎用固定
px，iOS Safari 对小于16px的文本会强制放大（可加-webkit-text-size-adjust: 100%抑制，但需权衡可访问性） - 想统一缩放体验，推荐用
clamp(1rem, 4vw, 1.5rem)做流体字号，比媒体查询更轻量
line-height 设得太小导致文字被截断
line-height 控制行高，但它不是“行间距”，而是**整行占据的高度**（含上下留白）。设太小会让上下文字视觉重叠，甚至让 sup、sub 或中文标点溢出容器。
错误认知：以为 line-height: 1 就是“紧贴”，结果发现字被砍掉顶部（如 “g”、“j”、“ü” 的下伸部分）。
实操建议：
- 纯数字值（如
1.5）最安全，它基于当前font-size计算，不继承父级line-height的像素值 - 避免用
px或em写死line-height，否则字体大小一变，行高就失配 - 中文排版建议最小值：正文
line-height: 1.6～1.8，标题可略小（1.3～1.5），但别低于1.2 - 如果用了自定义字体，务必检查其
ascender/descender区域是否异常 —— 这类问题在 WebFont 加载完成前常表现为文字跳动或裁切
font-weight 数字值为什么不生效
不是所有字体都提供 9 个字重（100～900）。很多中文字体只内置 normal（400）和 bold（700），写 font-weight: 600 就会回退到 400 或模拟加粗（浏览器伪造，边缘发虚）。
典型表现：代码写了 font-weight: 500，DevTools 显示已应用，但肉眼看不出区别；或在 Chrome 看正常，Safari 里变细了。
实操建议：
- 查字体官网或用
@font-face的font-weight声明确认支持哪些值（例如 Noto Sans CJK 支持 300/400/500/700/900） - 避免依赖浏览器模拟加粗（
font-synthesis: weight可禁用，但兼容性有限） - 中文字体优先用命名值：
font-weight: normal/bold更稳妥；英文可大胆用500、600，前提是字体文件真包含 - WebFont 加载时，可用
font-display: swap防止 FOIT，但要接受短暂的字体替换闪烁
font-size，可能牵出 line-height 失配、font-weight 回退、甚至整个响应式断点失效 —— 别只盯着一个声明调。 
