font-family需设备选字体并用引号包裹含空格字体名；font-weight数值须匹配已加载字体档位；rem依赖可预期的根字号；line-height优先用无单位值；font-display:swap防FOIT但需防布局跳动。
font-family 设置字体族名时必须写备选字体
浏览器不一定装有你指定的字体，不写备选字体可能导致文本回退到系统默认等宽字体（比如 Courier New），样式完全失控。
优先用引号包裹含空格或特殊字符的字体名，中文字体建议加引号避免解析异常。
- 正确写法：
font-family: "PingFang SC", "microsoft YaHei", sans-serif; - 错误写法：
font-family: PingFang SC, Microsoft YaHei, sans-serif;（中间空格被当成分隔符） - Web 安全字体推荐以
sans-serif、serif、monospace收尾，确保降级可用
font-weight 数值用 100–900 时要注意字体文件是否支持
不是所有字体都提供 9 档粗细。比如只加载了常规（400）和粗体（700）两个 @font-face 文件，那设 font-weight: 600 实际仍渲染为 400 —— 浏览器不会插值计算，只会找最接近且已加载的档位。
- 常见映射：
400 = normal，700 = bold - 自定义字体务必在
@font-face中显式声明font-weight值，例如：@font-face { font-family: "MyFont"; src: url("myfont-bold.woff2") format("woff2"); font-weight: 700; } - 避免滥用
font-weight: 900，很多中文字体根本没有 ultra Bold 版本
font-size 使用 rem 时根元素 font-size 必须可预期
rem 是相对于 :root 的 font-size 计算的，如果根字号被 js 动态修改、或被用户缩放覆盖，所有 rem 值都会偏移。移动端尤其容易因 viewport 缩放或系统字体设置失效。
- 推荐固定根字号：
:root { font-size: 16px; }（不要用百分比或em） - 如需响应式，用媒体查询改
:root：@media (max-width: 768px) { :root { font-size: 14px; } } - 慎用
font-size: clamp(1rem, 2.5vw, 1.25rem);，部分老浏览器不支持，且会干扰可访问性缩放逻辑
line-height 不要设为无单位数值，否则继承行为易出错
设 line-height: 1.5（无单位）是相对当前字体大小的倍数，继承时也按子元素自己的 font-size 重新计算，安全；但设 line-height: 20px（带单位）会强制继承该像素值，子元素字体变大后行高可能不够，出现文字重叠。
立即学习“前端免费学习笔记（深入）”；
- 始终优先用无单位值：
line-height: 1.4;、line-height: 1.5; - 绝对单位仅用于极少数需要精确对齐的场景（如图标内嵌文字），且必须配合
vertical-align调整 - 表格单元格、按钮内文本若行高异常，先检查父级是否意外设置了带单位的
line-height
实际项目里最容易被忽略的是字体加载状态：font-display: swap 能防止 FOIT（Flash of Invisible Text），但若字体加载失败，备用字体可能字重/字宽差异极大，导致布局跳动。这类问题往往要结合 @font-face 和 css containment 才能稳住。