17370845950

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 才能稳住。