font-family 中添加 sans-serif 等通用字体是为了确保当所有指定字体缺失时，浏览器能按字体族类型回退到可用默认字体，避免跨平台显示不一致；它不是具体字体，而是兜底机制。
font-family 里为什么加 sans-serif 这类通用字体
浏览器渲染文字时，如果指定的字体在系统中不存在，就会跳过该字体、尝试下一个。不写通用字体的话，一旦所有指定字体都缺失，就可能回退到系统默认字体（比如 Windows 的 Times New Roman），导致跨平台显示不一致。sans-serif、serif、monospace 是 CSS 定义的五种通用字体族，它们不是具体字体，而是告诉浏览器“按这个类型选一个可用的默认字体”。
常见写法：
body { font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif; }
注意点：
-
"PingFang SC"和"Microsoft YaHei"必须加引号，因为含空格或中文 -
macOS 优先用
"Helvetica Neue"，Windows 优先用"Microsoft YaHei"，顺序不能颠倒 - 最后必须保留
sans-serif，否则 iOS 或某些 Linux 发行版可能 fallback 到衬线字体
中英文混排时 font-family 怎么写才不乱
中文字体通常不包含英文字母的高质量字形，而英文字体又不支持中文字符。如果只写一个中文字体，英文会变丑；只写一个英文字体，中文直接无法显示。必须分层声明，让浏览器按需匹配。
立即学习“前端免费学习笔记（深入）”；
推荐结构：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC";
关键逻辑：
- 前面放高质量英文字体（含系统级字体如
-apple-system），覆盖英文、数字、符号 - 后面放中文字体，确保中文能显示；但顺序靠后，避免干扰英文渲染
-
"Noto Sans CJK SC"和"Source Han Sans SC"是开源泛中日韩字体，适合无预装中文字体的环境（如 Docker 容器、Linux 服务器渲染）
font-family 设置后还是显示 Times New Roman
这通常不是 font-family 写错了，而是样式被更高优先级规则覆盖，或者元素继承了父级的字体设置。
排查步骤：
- 用浏览器开发者工具检查目标元素的
font-family计算值，看是否真的应用了你写的值 - 确认有没有更具体的 CSS 选择器（比如
p、.content p）覆盖了全局body设置 - 检查是否用了
!important强制设置了其他字体（尤其第三方 UI 库如 Ant Design、Element Plus 常自带重置） - 留意
@font-face加载失败时，浏览器会静默 fallback，不会报错，但可能最终用到Times New Roman
Web 字体（@font-face）和系统字体混用要注意什么
自定义 Web 字体加载慢、体积大，盲目替换所有文本字体会影响首屏性能和可访问性。建议只对标题、品牌文案等关键内容使用，正文仍依赖系统字体。
实操建议：
- 用
font-display: swap避免文字闪白（FOIT）：@font-face { font-family: "MyBrandFont"; src: url("brand.woff2") format("woff2"); font-display: swap; } - 不要在
body上直接设 Web 字体，改用类名控制范围，例如.title、.hero-text - 始终在
@font-face后的font-family声明中保留系统字体 fallback，比如："MyBrandFont", "Helvetica Neue", sans-serif - 注意字体权重匹配：如果只加载了
font-weight: 400的文件，但写了font-weight: 600，浏览器可能伪造加粗，导致模糊
font-display: swap 能缓解，但无法消除首次渲染时的字体跳变；如果设计稿对字号/行高有像素级要求，就得接受 Web 字体加载完成前的布局偏移。 
