HTML表格怎么设置不同单元格的字体？CSS控制FONT样式-html教程-PHP中文网

直接给或加 style 属性最简单但不宜滥用，仅适用于临时调试或极少数特例；应优先使用语义化 class（如 .amount、.status-success）配合规范字体链和统一单位（推荐 px）来确保跨平台一致性与可维护性。

html表格怎么设置不同单元格的字体？css控制font样式

直接给 `<td> 或 <code><th> 加 <code>style` 属性最简单，但别滥用
想快速改某个单元格的字体，比如让第一行表头加粗、某列数字变小，直接写 `<th style="font-weight: bold; font-size: 18px;">姓名</th>` 就能生效。这种内联样式优先级最高，会覆盖外部 CSS 规则。

但注意：如果表格有几十个单元格，每个都手写 `style`，后期改字号或字体时得逐个替换，极易出错漏改。它只适合临时调试或极少数特例。

中文字体名必须加引号，比如 `font-family: "Microsoft YaHei", sans-serif;` —— 不加引号在 macOS/Linux 上大概率失效

`font-size` 推荐用 `px` 或 `rem`，避免用 `em`（它会继承父元素缩放，表格里层级嵌套容易失控）

别用 `<font></font>` 标签——HTML5 已废弃，现代浏览器虽兼容，但校验失败，且无法响应式适配

用 class 区分不同语义的单元格，比如 `.amount`、`.header`、`.note`

真实项目里，表格内容通常有明确含义：金额列要右对齐+等宽字体，状态列要加颜色，备注列字号小一点。这时该用语义化 class：

th { font-weight: 600; }
.amount { text-align: right; font-family: "Consolas", "SF Mono", monospace; }
.status-success { color: #28a745; }
.note { font-size: 12px; color: #6c757d; }

对应 HTML 写成：<td class="amount">¥12,800.00</td>、<td class="status-success">已发货</td>。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

class 名别用 red-text 这种纯样式名，改设计时（比如换成绿色）就得改 HTML，违背语义原则
同一列多个单元格共用 class，比给每个 <td> 单独写 <code>style 更易维护
如果整列都要统一样式，可用 <col class="col-amount"> 配合 CSS 的 col.col-amount td 选择器，减少 class 重复

`font-family` 必须带 fallback 链，否则 Windows 和 macOS 显示不一致

只写 font-family: 微软雅黑; 或 font-family: Microsoft YaHei; 在非 Windows 系统上基本不生效——不是浏览器 bug，而是字体根本不存在。

正确写法是按系统主力字体顺序排列，并以通用族名收尾：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;

macOS 优先匹配 PingFang SC，Windows 找 Microsoft YaHei，Linux 用 Noto Sans CJK SC
前面的 -apple-system 和 BlinkMacSystemFont 是 Safari/Chrome 在 macOS 上的系统字体别名，比硬写 "Helvetica Neue" 更可靠
千万别把 "SimSun" 放前面——Win11 默认不装宋体，fallback 失败后可能退到 Times New Roman，中文显示异常