如何在Tailwind CSS中设置字体族_在配置文件中通过fontFamily扩展-css教程-PHP中文网

必须用extend.fontfamily而非theme.fontfamily，否则会完全覆盖默认sans/serif/mono键，导致font-serif等类无对应声明而回退到times new roman；中文字体须前置加引号，sans-serif必须置末尾。

如何在tailwind css中设置字体族_在配置文件中通过fontfamily扩展

直接改 theme.fontFamily 会丢掉 font-sansfont-seriffont-mono 这些默认类，必须用 extend.fontFamily。

为什么不能直接写 `theme.fontFamily`

Tailwind 的默认字体族（sans、serif、mono）只在初始 theme 中定义。一旦你写成：

theme: {
  fontFamily: {
    sans: ['Inter', 'system-ui']
  }
}

就等于完全覆盖了整个 fontFamily 对象，serif 和 mono 键彻底消失。后续用 font-serif 类时，CSS 里根本没对应声明，浏览器只能回退到系统默认字体——甚至可能渲染成 Times New Roman。

常见现象包括：

font-serif 不生效，<h2 class="font-serif"></h2> 看起来和普通文本一样
控制台无报错，网络面板也没字体请求，但文字就是不变
DevTools 里检查 font-family 计算值，发现压根没展开，只显示 initial 或空值

正确扩展自定义字体别名（如 `font-heading`）

想新增一个叫 font-heading 的类，就得在 extend.fontFamily 里加键名 heading，值为字符串数组：

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        heading: ['"Playfair Display"', 'Georgia', 'serif'],
        mono: ['"Fira Code"', 'ui-monospace', 'monospace']
      }
    }
  }
}

注意几个硬性约束：

Pandas 配置文件报告生成器

使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。

下载

键名必须是合法标识符：小写字母开头，只含字母/数字/短横线，比如 heading ✅，'IBM Plex Sans' ❌（含空格和引号，Tailwind 忽略）
数组第一项是你要用的字体名，必须和 @font-face 中的 font-family 值完全一致（大小写、引号、空格都不能差）
中文字体或含空格的字体名（如 "PingFang SC"）必须加双引号，否则 CSS 解析失败
不要只写一个字体名，比如 ['Inter'] —— 浏览器找不到就直接跳到 sans-serif，中间没缓冲，可能崩到 SimSun

中文字体栈怎么排顺序才不乱码

数组顺序 = fallback 优先级。中文字符渲染是否正常，取决于第一个能显示中文的字体是否排在西文字体前面。错误顺序会让 Inter 渲染中文，结果是方块或异常字形。

推荐结构（macOS / Windows / Linux 兼顾）：

sans: [
  '"PingFang SC"',           // macOS 简体
  '"Microsoft YaHei"',       // Windows 简体
  '"Noto Sans CJK SC"',      // Linux / 跨平台兜底
  'system-ui',
  '-apple-system',
  'BlinkMacSystemFont',
  '"Segoe UI"',
  'Roboto',
  '"Helvetica Neue"',
  'Arial',
  'sans-serif'
]

关键点：

中文字体必须前置，且带引号；日/韩字体（如 "Hiragino Kaku Gothic Pro"）紧随其后
sans-serif 必须放在最后——放中间或开头会导致匹配提前终止
不要用 "STHeiti" 或 "Hiragino Sans GB"，iOS 13+ 和现代 macOS 已移除，会降级失败
如果项目支持繁体，只在 serif 分支加 "Noto Serif CJK TC"，别塞进 sans 里干扰简体用户

为什么配好了还是不生效

90% 的“不生效”不是配置问题，而是加载链断了：

@font-face 没写，或写在 @tailwind base 之后 → 字体注册失败
@font-face 里的 font-family: "robotoMono" 和 config 里 robotoMono: [...] 大小写不一致 → 匹配不上
CSS 变量方式用了 "var(--font-sans)"，但 :root 里没定义 --font-sans → 最终值为空，浏览器跳过整条 font-family 声明
HTML 根元素写了 style="font-family: 'Helvetica';" → 层叠权重高于 font-sans 类，直接压制
用了 @layer base 重置 html 字体，但写成了 body → 移动端 Safari 不继承