应优先使用相对单位（如rem、clamp）设置font-size，避免固定像素导致响应式失效；color需注意透明度影响可读性，font-family须提供中文字体回退链；font-weight推荐用整百数字值并确保字体文件支持；font简写必须包含font-size和font-family且顺序正确。
font-size 怎么设才不踩坑
直接写 font-size: 16px 看似简单，但响应式场景下容易失效。移动端用固定像素值，缩放或横屏时文字可能过小或溢出容器。推荐优先用相对单位：rem（基于根元素字体大小）、em（基于父元素），或现代方案 clamp()。
-
font-size: clamp(1rem, 2.5vw, 1.5rem)—— 在最小 1rem、最大 1.5rem 之间随视口宽度平滑变化 - 避免在多层嵌套中混用
em，容易指数级放大（比如父级font-size: 1.2em，子再设1.2em，实际是 1.44 倍） - 全局根字体别盲目设
html { font-size: 62.5% }，这会绕过用户系统字号偏好，影响可访问性
color 和 font-family 的兼容性细节
color 支持所有标准颜色关键字、十六进制、RGB/RGBA、HSL/HSLA，但要注意透明度对可读性的实际影响。而 font-family 不是“选一个字体就行”，它是一组回退链。
- 中文字体必须显式列出常见系统字体，例如：
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - 避免只写
"Helvetica"—— macOS 和 Windows 渲染差异大，且 Linux 下大概率 fallback 到默认无衬线体 - Web 字体（如
@font-face）加载期间会触发 FOIT（Flash of Invisible Text）或 FOUT，建议配合font-display: swap控制行为
font-weight 数字值 vs 关键字的混淆点
font-weight 看似只是粗细，但不同字体支持的字重范围差异极大。用数字（如 400、700）比用关键字（normal、bold）更可控，但前提是字体文件本身包含对应字重。
-
font-weight: bold实际等价于700，但某些自定义字体只提供了400和600，这时bold可能被浏览器模拟加粗（失真、模糊） - 使用 Google Fonts 时，务必在链接中显式声明所需字重，例如：
&display=swap&family=Inter:wght@400;600;700 - CSS 中写
font-weight: 550没有意义——浏览器只识别 100~900 步长为 100 的整百数，非整百值会被向下取整到最近的有效值
一行代码控制字体相关属性：font 简写陷阱
font 是简写属性，但它有严格顺序和强制项。漏掉某个必要值（比如 font-size 和 font-family），整个声明会被浏览器忽略。
立即学习“前端免费学习笔记（深入）”；
- 合法最简写法：
font: 1rem/1.5 "Helvetica Neue", sans-serif（注意斜杠分隔行高） - 不能省略
font-size和font-family，其他如font-weight、font-style、font-stretch都可选 - 用简写会重置未声明的子属性为初始值，比如已有
font-style: italic，再写font: 1rem sans-serif，斜体就丢了 - 调试时建议优先用独立属性，确认效果后再合并为
font简写
line-height、font-feature-settings 或微调 vertical-align 来收尾。 
