字体不生效主因是@font-face与tailwind.config.js中字体名不一致、路径错误或格式不匹配：需确保font-family字符串完全一致（含引号大小写）、路径相对css文件、woff2优先并提供多格式回退、@font-face置于@tailwind base前、配置用extend添加且类名严格对应。
字体文件能加载但不生效，八成是 @font-face 里路径、命名或格式写错了。别急着换字体，先查这三处。
src 路径必须相对于 CSS 文件位置
很多人把字体放在 src/assets/fonts/，却在 style.css（位于 src/assets/styles/）里写 url("fonts/myfont.woff2")，结果浏览器实际请求的是 /fonts/myfont.woff2（根路径），404 了。
- 正确写法：假设 CSS 在
src/assets/styles/index.css，字体在src/assets/fonts/myfont.woff2，则写url("../fonts/myfont.woff2") - 绝对路径也可用，但需带协议和域名，如
url("/assets/fonts/myfont.woff2")（前提是构建后该路径真实存在） -
file://协议本地双击 HTML 打开会触发 CORS，直接失败，务必用本地服务器（如npm run dev或 VS Code Live Server）测试
font-family 名和 format() 字符串必须严格匹配
浏览器不校验字体内容是否真叫 “AlibabaPuHuiTi”，只认你写的 font-family 字符串——它只是个“代号”，后续所有 font-family: "AlibabaPuHuiTi" 都靠它匹配。
- 名字含空格或特殊字符必须加引号：
font-family: "Fira Code"，写成font-family: Fira Code会解析失败 -
format()里的字符串必须准确：format("woff2")有效，format(woff2)（没引号）、format("woff 2")（多空格）都无效 - 多个字重共用同一
font-family名，靠font-weight区分，比如常规体写font-weight: 400，粗体写font-weight: 700，但浏览器不会验证文件内容是否真支持该字重
WOFF2 必须 fallback，且顺序不能错
只提供 .woff2 格式，IE11 和部分旧安卓 WebView 会整个忽略这条 @font-face 规则，连降级字体都不走。
- 推荐 src 顺序：
url("myfont.woff2") format("woff2"), url("myfont.woff") format("woff"), url("myfont.ttf") format("truetype") - 构建工具（Webpack/Vite）默认不处理
url()中的字体路径，除非你显式引入（如@import或url(./xxx)），否则字体不会被打包进输出目录 - 务必加
font-display: swap，否则文字会空白等待字体加载（FOIT），尤其在弱网下体验极差
Tailwind 用户注意类名生成逻辑
你在 @font-face 里写了 font-family: "robotoMono"，又在 tailwind.config.js 的 fontFamily 里加了 robotoMono: ["robotoMono", ...]，Tailwind 才会生成 font-robotoMono 类。
- 键名
robotoMono必须和@font-face中的font-family值完全一致（大小写、下划线、引号都不影响键名，但值本身要匹配） - 类名是
font-robotoMono，不是font-roboto或font-robotomono，拼错就失效 - 如果用了
@tailwind base，@font-face必须放在它前面，否则被 Tailwind 的基础重置覆盖
最容易被忽略的是：字体加载成功 ≠ 渲染成功。Network 面板看到 200 只说明文件拿到了，但 font-family 名不一致、font-weight 不匹配、甚至元素上写了 font-family: "MyFont", sans-serif 却没定义 "MyFont"，都会导致回退到 sans-serif——你以为是字体问题，其实是链路断在了某一处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
