使用@font-face加载本地字体需确保路径正确、格式完整（优先woff2，fallback woff/ttf）、声明准确；常见问题包括路径错误、格式缺失、CORS限制、font-weight不匹配及font-display未显式设置。
怎么用 @font-face 加载本地字体文件
直接在 CSS 里声明 @font-face，就能让浏览器下载并识别你自己的字体文件。关键不是“能不能加”，而是“路径对不对、格式全不全、声明准不准”。
常见错误是只放了 .ttf，结果 Safari 或旧版 Android 打不开；或者路径写成相对 CSS 文件的路径，但实际部署后结构变了。
-
src里优先写url('xxx.woff2')，再 fallback 到.woff和.ttf（.woff2压缩率高、兼容性好，现代浏览器都支持） -
font-family必须加引号，尤其是含空格或中文名时，比如font-family: 'HarmonyOS Sans'; - 路径以 CSS 文件为基准：如果 CSS 在
/css/style.css，字体在/fonts/inter.woff2，那url('../fonts/inter.woff2')才对
为什么写了 @font-face 字体还是没生效
最常卡在字体加载完成前就渲染了文字，导致回闪（FOIT/FOUT），或者压根没触发下载——浏览器会跳过无效声明。
检查三件事：font-family 是否拼错、是否被更高优先级规则覆盖、控制台有没有 Failed to decode downloaded font 或 CORS error。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具 → Network 标签页，筛选
Font，看字体文件是否 200 返回；如果是 404，立刻核对路径 - 如果报
CORS error，说明字体文件在跨域 CDN 上且没配Access-Control-Allow-Origin，本地开发时可用python3 -m http.server启服务绕过 - 别在
@font-face里写font-weight: bold却拿普通文本去匹配——要确保 HTML 元素的font-weight和声明一致，否则可能回退到系统字体
font-display 怎么选才不卡顿不闪屏
font-display 决定浏览器等字体还是先用备用字体渲染，它不是锦上添花，而是直接影响首屏体验。
默认值 auto 行为不统一（Chrome 等同 block，Firefox 类似 swap），必须显式声明。
-
font-display: swap：最常用，字体加载中显示后备字体，加载完立即替换（有闪动但不阻塞渲染） -
font-display: optional：适合非关键字体（如装饰性标题），网络慢时直接跳过加载 -
font-display: block：强制等字体加载完再渲染文字，白屏风险高，仅限极小字体（
如何验证字体真的被用了
靠眼睛看“像不像”不可靠，得查真实渲染链路。
Chrome DevTools 的 Elements 面板里选中文字元素，右侧 Styles 里找到 font-family，往下拉到 “Computed” 标签页，点开 font-family，能看到最终生效的字体名（比如 "Inter", "Helvetica Neue"）；如果显示的是 "Times New Roman" 或 "PingFang SC"，说明自定义字体根本没命中。
- 右键文字 → “Inspect” 后，在 Computed 面板搜
font-family，确认值是否为你声明的font-family名 - 如果值是对的但看起来不像，可能是字体文件本身不含该字重（比如只提供了 Regular，却写了
font-weight: 600） - 某些字体（如思源黑体）分简体/繁体版本，
lang="zh-Hans"属性会影响实际调用哪个 OpenType 特性，别忽略 HTML 的lang设置
woff2，旧安卓就 fallback；少一个 font-display，首屏就白屏；少一个引号，整条规则就静默失效。 
