font-family 要生效必须加引号并提供 fallback 字体链，如 "Microsoft YaHei", "PingFang SC", sans-serif；排查需查 Computed 面板确认覆盖与字体存在性。
font-family 属性怎么写才生效
直接写 font-family: "微软雅黑" 很可能白忙活——浏览器根本不用它，尤其在 macOS 或 Linux 上。原因很简单：字体名带空格或中文时，必须加引号；但更关键的是，你得提供 fallback 字体链，否则只要第一个字体缺失，整个声明就“断掉”了。
实操建议：
- 始终用英文逗号分隔多个字体，末尾必接通用族名：
font-family: "Microsoft YaHei", "PingFang SC", sans-serif - 中文字体优先放系统常见名称，比如 Windows 用
"Microsoft YaHei"，macOS 用"PingFang SC"，iOS 用"Helvetica Neue" - 避免写
"SimSun"这类老字体——Win11 已默认不装宋体（SimSun），会直接跳到下一个 fallback - 不要依赖本地字体名“看上去像”，比如
"黑体"在多数系统里不被识别，"SimHei"才是正确写法
为什么 CSS 里写了 font-family 却没变字体
最常见原因是继承链干扰或选择器权重不够。比如你在 .content 里设了字体，但里面某个 h2 标签的样式来自第三方库（如 Ant Design），它的 font-family 声明带 !important，或者选择器更具体（如 h2.ant-typography），你的规则就被覆盖了。
排查步骤：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools，选中目标元素，看
Computed面板里font-family最终值是什么，点击右侧箭头追源头 - 检查是否被
all: unset或font: inherit重置过 - 注意
@font-face加载失败时，浏览器会静默降级，不会报错，但字体就是不出现 - 如果用了 CSS-in-JS（如 styled-components），确认插件没自动剥离
font-family声明（某些旧版有这 bug）
@font-face 引入自定义字体的坑
不是把 url(...) 往那儿一贴就完事。字体文件路径错、格式不兼容、跨域限制、或者没申明 font-display，都会导致文字闪动、空白或回退成默认字体。
关键点：
-
src里至少提供woff2和woff两种格式，woff2放前面（现代浏览器优先用它，体积小） - 路径必须相对于 CSS 文件位置，不是 HTML 页面——比如 CSS 在
/css/style.css，字体在/fonts/icon.woff2，就得写url("../fonts/icon.woff2") - 务必加
font-display: swap，否则 Chrome 会阻塞文本渲染直到字体加载完成（尤其慢网下等好几秒） - 别漏写
font-weight和font-style，否则同一字体家族里bold或italic可能匹配不到对应文件
内联 style 和外部 CSS 的字体行为差异
用 style="font-family: 'Arial';" 写在标签上，看着没问题，但一旦遇到 CSS 重置（比如 normalize.css 把 body 设为 font-family: system-ui），这个内联样式很可能被更高优先级的外部规则压制——因为内联样式的权重虽高，但若外部规则用了 !important 或更具体的选择器，它照样输。
更隐蔽的问题：
- 服务端渲染（SSR）时，内联 style 里的字体名如果含空格却没引号（如
style="font-family: Microsoft YaHei"），HTML 解析会截断成Microsoft，后面全丢 - 某些构建工具（如 Vite + CSS extraction）会把内联 style 当作纯字符串处理，不校验字体语法，出错也不提示
- 移动端 WebView（尤其 Android 4.x）对内联
font-family的解析极不稳定，强烈建议统一走 class + 外部 CSS
