@font-face声明必须写在css中，仅设font-family无效；需先定义@font-face，确保字体名、路径、字重一一对应，并用相对路径引用woff2（配woff降级）。
@font-face 声明必须写在 CSS 里，不能只改 font-family
很多人用编辑器（如 VS Code、Sublime）加完字体后页面没变化，核心原因是只在 font-family 里写了自定义字体名，却漏了 @font-face 声明。浏览器不认识那个名字，直接跳过，回退到 sans-serif 或系统默认字体。
实操建议：
- 在
<style></style>标签内或外部 CSS 文件中，先写完整的@font-face块，确保font-family名与后续调用时完全一致（包括引号、大小写、空格） - 字体文件路径要用相对路径，比如
./fonts/Inter-Regular.woff2，别用file:///或绝对路径 - 同一字体不同字重（400/600/700）必须各自声明一个
@font-face，不能指望浏览器自动加粗 - 检查控制台是否有
Failed to load resource: the server responded with a status of 404或Cross-Origin Request Blocked—— 这说明路径错或服务没起
woff2 是首选格式，但得配 woff 作降级
现代浏览器全支持 .woff2，压缩率比 .woff 高 30% 左右，加载更快。但旧版 Chrome（.woff。单写 .woff2 会导致这些用户看不到自定义字体。
实操建议：
-
src属性里按优先级从高到低列：先url('xxx.woff2') format('woff2')，再url('xxx.woff') format('woff') - 不用硬塞
.ttf或.eot—— IE11 已基本退出主流，强行兼容反而增加体积和维护成本 - 用 google-webfonts-helper 之类工具一键生成多格式 + 多字重的声明块，省得手写出错
font-display: swap 能避免文字闪白或隐藏
不加 font-display 时，Chrome/Firefox 默认用 block 策略：字体没加载完，文本先空白（FOIT），等 3 秒才 fallback。用户看到“文字消失又弹出来”，体验很差。
实操建议：
- 在每个
@font-face块里紧挨src后加一行：font-display: swap; - 这样浏览器会立即用后备字体渲染，等自定义字体就绪后秒级替换，用户几乎无感知
- 别用
optional—— 它可能干脆不加载字体，尤其在弱网下；也别用fallback—— 替换窗口太短，容易错过
本地双击打开 HTML 会触发 CORS，必须起服务
用编辑器写完 HTML 直接双击运行？那字体文件 100% 加载失败。因为 file:// 协议下，浏览器禁止跨源请求，而字体文件被当作“跨源资源”拦截。
实操建议：
- VS Code 用户装 Live Server 插件，右键 → “Open with Live Server”
- 命令行临时起服务：
python3 -m http.server 8000（macOS/Linux）或py -m http.server 8000（Windows） - 部署到 Nginx/Apache 时，确认 MIME 类型已配：`.woff2` 对应 `font/woff2`，否则某些浏览器拒绝解析
最常被忽略的一点：字体授权。免费下载的 .ttf 文件不一定允许 Web 使用，商用项目务必查清许可证 —— 尤其是中文商用字体，很多要求单独购买 Web License。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
