@font-face 必须正确书写 src 属性，使用相对或绝对 URL 并包含 format()，路径以 CSS 文件位置为基准；推荐同时提供 woff2 和 woff 格式，按顺序逗号分隔；务必设置 font-display: swap 防止 FOIT/FOUT，并确保服务器正确配置字体 MIME 类型。
font-face 的基本写法和 src 属性必须写对
浏览器只认 @font-face 规则里的 src 值，路径错一个斜杠、少一个引号、漏掉 format()，字体就加载失败。常见错误是把本地路径（如 C:\fonts\myfont.woff2）直接写进 src，这在网页里完全无效。
-
src必须是相对 URL 或绝对 URL，例如url('./fonts/myfont.woff2') - 多个格式要按推荐顺序写，并用逗号分隔，优先放现代格式：
url('./myfont.woff2') format('woff2'), url('./myfont.woff') format('woff') - 路径以 CSS 文件位置为基准，不是 HTML 页面位置；如果 CSS 在
/css/style.css，字体在/fonts/，就得写../fonts/myfont.woff2 - 不要省略
format()，否则 Safari 和旧版 Edge 可能拒绝加载
字体文件格式选 woff2 还是 woff？兼容性怎么平衡
woff2 体积比 woff 小 30% 左右，但 IE 完全不支持；woff 能覆盖 IE9+，是当前最稳妥的“兜底”格式。实际项目中，除非明确放弃 IE，否则应同时提供两种。
- 现代项目可主用
woff2，加woff作 fallback：@font-face { font-family: 'MyFont'; src: url('./fonts/myfont.woff2') format('woff2'), url('./fonts/myfont.woff') format('woff'); font-weight: 400; font-style: normal; } - 如果还要支持 IE8，得额外加
eot和svg，但注意eot要放在src列表最前面（IE 只读第一个） - 别用
ttf直接上生产——没有压缩，加载慢，且部分安卓浏览器渲染异常
font-display 控制字体加载行为，避免 FOIT/FOUT 体验崩坏
默认情况下，Chrome 等浏览器会阻塞文本渲染直到字体加载完成（FOIT），导致空白几秒；设成 swap 会先用备用字体显示，等自定义字体就绪再替换（FOUT）。这个属性不加，用户很可能以为页面卡了。
- 推荐值是
font-display: swap，兼顾性能与可用性 -
block会延长阻塞期（最多 3s），适合品牌字体必须显示的场景 -
fallback和optional会跳过加载，仅当字体已缓存才用——不适合核心文本 - 该属性需写在每个
@font-face块内，不能全局设置
字体加载后没生效？检查 font-family 名称和继承链
定义时的 font-family 名称和使用时的名称必须**完全一致**（包括空格、大小写、引号），而且 CSS 优先级、font-weight/font-style 匹配不上也会回退到系统字体。
立即学习“前端免费学习笔记（深入）”；
- 定义时写的是
font-family: 'My Font'，使用时就得写font-family: 'My Font'，不能写成MyFont或my font - 如果定义了
font-weight: 700，但元素用了font-weight: bold，某些浏览器可能不匹配（建议定义时用数字，使用时也尽量用数字） - 用浏览器开发者工具的
Computed面板看font-family实际解析值，再点开font展开项，确认是否显示 “My Font (local)” 或 “(downloaded)” - 父元素设了
font-family: system-ui且没被覆盖，子元素即使写了自定义字体也可能被继承压制
text/plain，浏览器直接拒收。Nginx/Apache 需手动添加 .woff2 对应的 application/font-woff2 类型，否则控制台会报 Failed to decode downloaded font。 
