表格上font-family无效的主因是字体未通过@font-face或<link>正确加载并声明，需检查Network中字体请求状态、确保字体名完全一致、路径相对于CSS文件、fallback链完整且含系统字体。
直接在表格元素上设 font-family 无效，除非字体已通过 @font-face 或 <link> 正确加载并声明——很多人卡在这一步，不是 CSS 写错了，而是字体根本没进来。
font-family 为什么在 table 上不生效？
表格本身不决定字体，它继承自父级或全局样式。常见错误是只写了 table { font-family: "Inter"; }，但没确保 "Inter" 这个名字已被浏览器识别。
- 检查 DevTools → Network → 过滤
font，看是否有 404 或 pending 状态：说明字体文件根本没加载成功 - 确认
font-family字符串和字体声明中的font-family值完全一致（包括引号、空格、大小写）：Google Fonts 给的是"Inter"，你就不能写inter或Inter-Regular - 别把字体名和文件名混淆：WOFF2 文件叫
inter-v3.woff2，CSS 里引用的仍是font-family: "Inter"
用 <link> 引 Google Fonts 时 display=swap 必须带
否则表格文字会白屏几秒（FOIT），尤其在慢网下更明显。这个参数不在 CSS 里加，而在 <link> 的 URL 里。
- 去 Google Fonts 选好字体后，切到
<link>标签页，复制整行——重点核对 URL 是否含&display=swap，漏了就等于没加 -
<link>必须放在<head>里，且要在任何用到该字体的 CSS 之前（比如<style>或外链.css前） - 如果表格只用常规体和粗体，URL 中明确写
wght@400;700，别留wght@100;200;300;400;500;600;700;800;900——多加载 8 个字重，CSS 规则体积翻倍
@font-face 引本地字体必须路径对、格式全、weight 分开
这是最可控的方式，但路径错、格式漏、字重混写都会导致表格字体回退到默认宋体/Helvetica。
立即学习“前端免费学习笔记（深入）”；
- 路径是相对于 CSS 文件位置，不是 HTML：CSS 在
css/style.css，字体在css/fonts/，src就写url('fonts/inter-regular.woff2')，不是../fonts/... - 每个字重单独一个
@font-face块：font-weight: 400对应 regular 文件，font-weight: 700对应 bold 文件，不能共用一个src - src 列表按兼容性降序：WOFF2 放最前，WOFF 次之，TTF 最后；对应 format 声明也得一一匹配：
format('woff2'), format('woff'), format('truetype') - 每个
@font-face块都加font-display: swap——它只对@font-face生效，对<link>引的远程字体无效
表格字体 fallback 不只是锦上添花
中文字体加载失败时，若没 fallback，可能整张表文字变成方块或空白。这不是 bug，是设计使然。
- font-family 至少包含三类 fallback：
font-family: "Inter", -apple-system, "Microsoft YaHei", sans-serif;——系统字体名带引号（如"Microsoft YaHei"），通用族不带（sans-serif） - 中文优先列本地常用字体：Windows 用
"Microsoft YaHei"，macOS 用-apple-system，Linux 常用Noto Sans CJK SC，最后兜底sans-serif - 避免在
font-family里混用中英文名不匹配的字体：比如"Helvetica Neue", "PingFang SC", sans-serif可能因 macOS 下 Helvetica 不含中文而断层
真正难的不是写那行 font-family，而是让浏览器在渲染表格前，已经拿到并解析完字体元数据。路径、参数、顺序、fallback，四者缺一不可——少验一个，用户看到的就是宋体表格。
