必须用 @font-face 注册本地字体，正确写法是：指定 font-family 名、按 woff2→woff→ttf 顺序提供多格式 src、路径相对于 CSS 文件、加引号使用并配 fallback 字体栈；关键要设 font-display: swap 防止 FOIT/FOUT。
如何用 @font-face 声明本地字体文件
必须先通过 @font-face 把字体文件“注册”进 CSS，浏览器才认得它。关键不是放对位置，而是路径写对、格式选对、font-family 名起得清清楚楚。
常见错误：src 里只写一个 url()，结果在 Safari 或 Firefox 里不显示——不同浏览器支持的字体格式不同，得兜底：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/myfont.woff2') format('woff2'),
url('fonts/myfont.woff') format('woff'),
url('fonts/myfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}-
woff2优先放最前（体积小、现代浏览器全支持） -
woff是兼容老 Chrome/Firefox 的稳妥选择 -
truetype（.ttf）仅在 IE9+ 或某些安卓 WebView 中必要，别省略但也不必放第一 - 路径必须相对于 CSS 文件位置，不是 HTML；用相对路径更稳，避免部署后 404
如何在元素上正确使用 font-family
声明完 @font-face 后，font-family 的值不是文件名，也不是路径，而是你给它起的“代号”——也就是 @font-face 里写的那个字符串。
错误写法：font-family: 'myfont.ttf'; 或 font-family: MyCustomFont, sans-serif;（漏掉引号，IE 会失效）
立即学习“前端免费学习笔记（深入）”；
正确写法：
p {
font-family: 'MyCustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}- 自定义字体名必须加单引号或双引号，尤其含空格或连字符时（如
'Inter Var'） - 务必写回退字体栈：系统字体 + 通用族（
sans-serif），防止字体加载失败或超时导致文字不可读 - 不要只写一个自定义字体——没有 fallback 的
font-family: 'MyCustomFont';在字体未就绪时会显示空白或默认衬线体
字体加载失败或闪烁（FOIT/FOUT）怎么缓解
浏览器默认行为是：字体没加载完，就等（FOIT），或者先用备用字体渲染再替换（FOUT）。用户看到文字跳变或白屏，问题出在加载策略和 CSS 写法上。
解决核心：用 font-display 控制行为，而不是靠 JS 监听或第三方库硬扛：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/myfont.woff2') format('woff2');
font-display: swap; /* 关键！ */
}-
swap：立即用 fallback 渲染，字体加载完立刻换，用户感知最小 -
optional：只在字体已缓存时使用，否则直接 fallback（适合非关键字体） - 别用
block（默认值），它会让文字空白几秒，尤其弱网下体验极差 -
font-display不被 IE 支持，但 IE 本身不支持@font-face的高级用法，所以不用为它降级
字体文件太大？怎么查和优化
一个未压缩的 .ttf 动辄 2–5MB，首屏加载卡顿，不是“加了字体”就行，得看实际影响。
检查方法很简单：打开 DevTools → Network → 刷页面 → 筛选 font，看每个字体请求的 size 和 time。
- 优先用
.woff2：比.woff小 30%+，所有现代浏览器都支持 - 删子集：如果只用中文，别引入完整思源黑体（10MB+）；用
pyftsubset或在线工具提取常用字（如 GB2312 范围） - 按需加载：标题用粗体，正文用常规体？那就分开声明两个
@font-face，并确保font-weight值匹配（如700对应bold） - CDN 加速没用：字体是二进制静态资源，放在同域 + HTTP/2 + Brotli 压缩更实在
字体不是装饰开关，它是文本可读性的基础设施。路径错、格式漏、没 fallback、不设 font-display，任何一个点没踩准，用户看到的就是一段等出来的空白，或突然跳动的文字。
