怎么在HTML表格中通过font-family属性指定表格全局字体-html教程-PHP中文网

table上设置font-family无效是因为td/th有更高优先级的用户代理样式，需显式设置table, th, td三者字体；含空格或中文的字体名必须加引号，如"Microsoft YaHei"。

怎么在html表格中通过font-family属性指定表格全局字体

font-family 设置在 table 元素上为什么无效？

直接给

标签加 font-family 通常没效果，因为表格单元格（

、

）会继承父级字体，但浏览器默认样式表可能对

等设置了更具体的规则（比如重置为 font-family: sans-serif），导致 table 上的声明被覆盖。

最可靠的做法：统一设置 table、th、td 的 font-family

必须显式覆盖所有关键单元格元素，避免继承链中断或层叠冲突：

table,
table th,
table td {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

不要只写 table { font-family: ... }，

和

可能有用户代理样式优先级更高

推荐用逗号分隔的字体栈，首项用引号包裹含空格的字体名（如 "Segoe UI"）

如果表格嵌套在其他容器中，考虑加上 !important —— 仅当确认是 CSS 层叠问题时才用，不建议作为常规方案

内联 style vs 外部 CSS：哪个更适合全局控制？

内联 style="font-family: ..." 写在

 上，仅影响该表格；若需多个表格统一字体，必须用 CSS 选择器批量控制：
所有表格：table { font-family: ... } + th, td { font-family: inherit; }（但不如前一节写法保险）
特定类表格：.data-table th, .data-table td { font-family: "Microsoft YaHei", sans-serif; }

注意：font-family 不继承自  或 ，除非你显式写了 body { font-family: ... } 并确保未被更具体规则覆盖

中文网页常见坑：字体名带空格或中文名必须加引号
像 Microsoft YaHei、Source Han Sans CN、微软雅黑 这类含空格或中文的字体名，漏掉引号会导致整个声明失效：

											
												
												
													htmlppt.skill
													把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
												
												下载
												
											
										

✅ 正确：font-family: "Microsoft YaHei", sans-serif;

❌ 错误：font-family: Microsoft YaHei, sans-serif;（浏览器把 YaHei 当作另一个字体名处理）
中文字体优先指定英文别名（如 "Microsoft YaHei"）而非直接写 微软雅黑，后者在非 Windows 系统可能 fallback 失败



实际生效的关键不是“设在哪”，而是“有没有覆盖到所有渲染文本的元素节点”。哪怕只漏了一个

没加声明，那一行表头就可能用系统默认字体。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！