css 字体样式不统一怎么办_font-family 指定通用字体_技术教程

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，浏览器可能伪造加粗，导致模糊