@font-face必需font-family和src两项，缺一即失效；font-family须加引号，src需按格式匹配多字体fallback；font-weight/font-style须与实际文件一一对应；font-display:swap防文字闪白；路径以CSS文件为基准。
@font-face 的完整语法不是“写个 url 就完事”，必须包含 font-family、src 两个必需项，其余如 font-weight、font-style、font-display 都是显式声明才生效的可选项；漏掉任一必需项或写错格式，浏览器直接忽略整条规则。
font-family 和 src 是唯二必需字段
没有 font-family，浏览器不知道怎么叫它；没有 src，等于没告诉它字体在哪。其他属性全不写，也能加载基础字重正常体，但实际项目中几乎不可能只用一种样式。
-
font-family必须用英文单引号或双引号包裹，哪怕名字是纯英文（如'Inter'），否则遇到空格、连字符、中文名时必然失效 -
src至少提供一个有效路径，推荐按优先级顺序写多个 fallback：url('./fonts/my.woff2') format('woff2')→url('./fonts/my.woff') format('woff')→url('./fonts/my.ttf') format('truetype') -
format()的值必须和文件后缀严格对应：.woff2对应'woff2'，.ttf对应'truetype'，写成'ttf'或'truetype'混用会触发 Safari/旧 Android 静默失败
font-weight 和 font-style 必须和实际使用场景对齐
浏览器不会“自动加粗”或“倾斜”你声明的常规体——它只做匹配。你在 CSS 里写 strong { font-weight: 700; }，但 @font-face 块里只声明了 font-weight: 400，那 <strong> 就会跳过你的字体，回退到 sans-serif。
- 每个字重（400、500、700…）和每种样式（
normal、italic）都需要独立的@font-face块 - 斜体文件不能复用常规体加
font-style: italic—— 必须有真实存在的myfont-italic.woff2并单独声明font-style: italic - 不要写
font-weight: bold，用数值（如700）更可靠；bold是别名，部分解析器可能不识别
font-display: swap 是防止文字闪白的关键开关
不加 font-display，现代浏览器默认行为是 FOIT（Flash of Invisible Text）：字体没加载完，文字干脆不显示，白屏几秒。加了 font-display: swap 才会先用系统字体撑开布局，等自定义字体就绪后立刻替换，用户感知不到中断。
立即学习“前端免费学习笔记（深入）”；
- 只支持 Chrome 49+、Firefox 60+、Safari 11.1+，老版本忽略该属性但不影响基础功能
- 不要写成
font-display: optional或block，前者可能导致字体永不加载，后者延长不可见时间 - 它必须写在
@font-face块内部，不能放到外部选择器里
路径错误是最常被忽视的硬伤
src 的路径永远以 CSS 文件所在位置为基准，不是 HTML 页面，也不是服务器根目录。本地开发时容易蒙对，一部署就 404。
- 假设 CSS 在
/css/style.css，字体在/fonts/inter.woff2，那么路径必须是url('../fonts/inter.woff2') - 避免绝对路径（如
url('/fonts/inter.woff2')），跨域或子路径部署时极易触发 CORS 错误 - Network 面板筛选
Font类型，看是否返回 200；若出现 404 或 CORS error，优先核对路径和服务器头配置（Access-Control-Allow-Origin）
真正卡住人的从来不是语法记不住，而是 font-family 名大小写不一致、src 路径相对基准搞错、font-weight 没配齐对应字重这三处——它们不出错时一切正常，一出就是“明明写了却没效果”，且控制台未必报错。
