能,但只在没被覆盖的前提下生效;body的font-family是继承起点,非强制命令,th、h1等元素若有更具体选择器或内联样式则中断继承,中文显示依赖字体回退机制,需显式声明带引号的中文字体并以sans-serif兜底。

body { font-family } 能不能直接控制表格和标题字体?
能,但只在没被覆盖的前提下生效。浏览器按 CSS 优先级向下继承,body 的 font-family 是起点,不是强制命令。一旦 table、th、h1 这类元素有更具体的选择器(比如 th { font-family: monospace; })或内联样式(<th style="font-family: SimSun">),继承就中断了。
常见错误现象:
- 写了
body { font-family: "Microsoft YaHei"; },但<th>还是加粗+等宽体 -
<p>字体变了,<input>却还是系统默认(尤其在 macOS 上)
验证方法:打开 DevTools → 选中任意文本元素 → 看 Styles 面板里 font-family 的“Computed”值,再点右侧箭头追踪来源。
为什么中文还是显示为宋体或 PingFang SC?
这不是样式失效,是字体回退机制在工作。浏览器从左到右匹配 font-family 列表,遇到中文字符时,会跳过不支持中文的西文字体(如 "Helvetica Neue"),直接回退到系统默认中文字体。
立即学习“前端免费学习笔记(深入)”;
真正统一中文字体的关键是显式声明 + 合理顺序:
- 中文字体名必须用英文引号包裹:
"Microsoft YaHei",不能写Microsoft YaHei - 至少列 2–3 个备选:Windows 用
"Microsoft YaHei",macOS 用"PingFang SC",Linux 可能用"Noto Sans CJK SC" - 末尾必须加通用族名:
sans-serif,否则缺字时可能回退到难看的衬线体(如 Times New Roman)
推荐写法:body { font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif; }
font-size 该用 px 还是 rem?
用 1rem。硬写 16px 会覆盖用户的可访问性设置——比如视力障碍用户调大了系统字号,或启用了浏览器强制缩放,px 值会让文字卡死不动。
rem 是相对于根元素(html)字体大小的单位,默认就是用户设定值,天然兼容缩放:
- 不用改
html,直接设body { font-size: 1rem; }就行 - 如果要微调比例(比如比系统默认略大),可用
1.0625rem(≈17px),而非17px -
input、button等表单控件默认继承body字号,所以这一步也顺带统一了它们
注意:em 容易嵌套失真(依赖父级字号),rem 更可控。
th 和 td 字体粗细/大小不一致怎么办?
这是浏览器 UA 样式导致的正常行为,不是 bug。th 默认有 font-weight: bold 和略大的 font-size(如 1.125em),而 td 是常规权重和 1em。
若需视觉统一,别指望继承,得显式重置:
- 加
line-height: 1.5防止小字号下表格行高塌陷 - 用数值控制粗细:
th { font-weight: 500; }比bold更稳,尤其在 variable font 场景下 - 最稳妥写法是锚定整个表格结构:
table, th, td { font-family: ..., font-size: 1rem; line-height: 1.5; }
容易被忽略的一点:很多 UI 框架(如 Bootstrap)会单独给 th 或 td 加 font-family,这种时候光改 body 完全无效,必须查 Computed 值定位源头。



















