@font-face是唯一能真正引入本地字体文件的方式，路径须相对于CSS文件位置，推荐WOFF2优先+WOFF fallback，必须加font-display:swap防FOIT，且每个字重/样式需单独声明。
@font-face 是唯一能真正“引入”本地字体文件的方式，其他像 或 @import 都只是加载远程字体服务的 CSS 规则，不涉及你自己的字体文件。
用 @font-face 引入本地字体文件时路径怎么写
路径必须相对于 CSS 文件位置，不是 HTML 文件。比如你的 CSS 在 css/style.css，字体放在 css/fonts/ 下，那 src 就得写 url('fonts/myfont.woff2')，不能写 url('../fonts/myfont.woff2') 或绝对路径（除非你真用了 CDN）。
- 推荐把字体和 CSS 放在同级目录或子目录下，避免路径错乱
- 别用中文路径、空格、特殊符号——浏览器可能直接忽略整个
@font-face块 - 开发时打开浏览器 DevTools 的 Network 标签页，过滤
font，看是否 404；如果是，八成是路径或服务器 MIME 类型没配对
@font-face 的 src 里多个格式顺序很重要
浏览器按 src 列出的顺序尝试加载，遇到第一个支持且能下载成功的就停。WOFF2 体积最小、解压最快，但 IE 不支持；WOFF 兼容性好，TTF 是兜底选项。
- 必须把
format('woff2')放最前，再跟format('woff')，最后才是format('truetype') - 不要只写一个格式——iOS Safari 14.5+ 才完全支持 woff2，旧版仍需 woff fallback
- 如果字体有不同字重（如 300、700），每个都得单独写一个
@font-face块，font-weight和src必须严格对应
为什么文字一闪就没了？加 font-display: swap
默认情况下，浏览器会等字体加载完才渲染文字（FOIT），导致白屏或延迟。不加 font-display，或者设成 auto，用户可能看到空白几秒。
- 必须在每个
@font-face块里显式声明font-display: swap -
swap表示先用备用字体撑开布局，字体加载完再无感替换，不影响排版流 - 别信某些教程说“加了就行”，它只对
@font-face生效，对引入的 Google Fonts 没用——那些得靠display=swap参数（见 URL 里的&display=swap）
用
很多人复制代码只粘贴 标签，却忽略 URL 里的 display=swap，结果还是 FOIT。
- Google Fonts 提供的链接里，
https://fonts.googleapis.com/css2?family=...&display=swap这个&display=swap不能删 - 如果要用多个字重或斜体，URL 中必须明确列出，比如
family=Noto+Sans+SC:wght@400;700;italic@400，否则只加载默认的 400 normal -
必须放在最前面，越早解析，字体请求越早发出
字体文件本身没加载失败，但文字始终不换字体？大概率是 font-family 名字拼错了、引号没闭合、或者忘了在 CSS 里实际调用它——这些细节比格式选择更容易卡住人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
