必须使用 theme.extend.fontFamily 追加字体配置，@font-face 需置于 @tailwind base 前且 font-family 名称严格一致，url() 路径须相对于 CSS 文件并能直接下载。
font-family 配置写在 theme.fontFamily 下就失效
直接覆盖 theme.fontFamily 会导致 Tailwind 原生的 font-sans、font-serif、font-mono 全部丢失，浏览器渲染时找不到对应定义，最终回退到系统默认字体。
必须改用 theme.extend.fontFamily，只追加新键名，不碰默认结构。例如：
extend: {
fontFamily: {
heading: ['"Clash Display"', 'sans-serif'],
mono: ['"Fira Code"', 'ui-monospace', 'monospace']
}
}
- 键名只能含 ASCII 字母、数字、短横线（
my-font✅，My Font❌） - 类名自动变成
font-heading，不是font-[heading]或font-Heading - 配置修改后必须重启开发服务器，热更新不生效
@font-face 声明位置或格式错误
@font-face 必须出现在 @tailwind base 之前，否则会被 Tailwind 的基础重置规则覆盖。常见错误是把它塞在 @tailwind utilities 后面，或放在 JS 模块里通过 import 加载——CSS 预处理器不会处理那种写法。
正确位置示例（如 src/styles/globals.css）：
立即学习“前端免费学习笔记（深入）”；
Pandas 配置文件报告生成器
下载
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
@font-face {
font-family: 'Clash Display';
src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
-
format()参数必须与文件类型严格匹配：.woff2→'woff2'，.ttf→'truetype'，漏写或写错（如'ttf'）会导致 Safari/Chrome 静默失败 -
url()路径是相对于当前 CSS 文件的，不是 HTML 页面；粘贴到浏览器地址栏能直接下载才算有效 - 推荐加上
font-display: swap，避免 FOIT（空白文本阻塞）
font-family 名称大小写或引号不一致
Tailwind 类名生成和 CSS 渲染都依赖 @font-face 中的 font-family 值与 tailwind.config.js 中的键名「字面量完全一致」：大小写、空格、单引号一个都不能差。
比如你在 CSS 里写了：
@font-face {
font-family: 'Clash Display';
src: url('./ClashDisplay.woff2') format('woff2');
}
那配置里就必须写：
heading: ["'Clash Display'", 'sans-serif']
- 引号嵌套要小心：
"'Clash Display'"表示字符串值带单引号，PostCSS 才能正确解析 - 如果
@font-face用的是font-family: ClashDisplay（无引号），配置里就得写ClashDisplay: ['ClashDisplay', 'sans-serif'] - 浏览器控制台 Elements 面板里检查元素 computed font-family，看实际生效的是哪个名字
本地字体路径被服务端拦截或协议限制
开发时用 file:// 协议打开 HTML，或 Electron 中未启用静态资源服务，都会导致字体 404 —— Chromium 渲染引擎默认禁止跨域加载本地文件。
- Vite / Webpack Dev Server 一般没问题；但
npx http-server可能缺 MIME 类型配置，需手动加.ttf、.woff2支持 - Electron 中确保
resources/fonts/在打包时被包含（如electron-builder的build.files） - 最简单的验证方式：把
url()里的路径复制进浏览器地址栏，能下载文件才算真正可达
真正卡住人的往往不是某一步做错了，而是三处细节同时没对上：配置键名、@font-face 字体名、CSS 文件中 url() 的相对路径。少盯一处，字体就静默回退。
