HTML表格不同单元格字体CSS样式实现方法与代码

使用 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 写成：¥12,800.00、已发货。这样，样式和结构清晰分离，后期改颜色或字体，只需要改 CSS 就行。

• class 名不要使用 red-text 这种纯样式名，当设计变更时（比如换成绿色）就需要修改 HTML，违背语义原则
• 同一列多个单元格共用 class，比给每个 单独写 style 更容易维护
• 如果整列都需要统一样式，可以使用 配合 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，中文显示异常

表格里 font-size 缩放容易踩坑：rem 受根字号影响，px 最稳定

如果页面全局设置了 html { font-size: 16px; }，那么 font-size: 0.875rem 就是 14px；但如果某处动态改变了根字号（比如响应式切换），所有 rem 值都会跟着变——表格数据列尤其害怕这种意外缩放。

• 固定尺寸场景（如后台管理表格）直接使用 px：表头 16px，正文 14px，小字备注 12px
• 需要随系统字号调整的（如阅读型报表），才考虑使用 rem，但务必测试 iOS/Android 字体放大设置下的表现
• 避免混用单位：同一张表里有的使用 px、有的使用 em，会导致视觉节奏断裂

真正麻烦的不是怎么写样式，而是字体链没配全、单位选错、class 未按语义命名——这些细节一旦遗漏，表格在不同设备上就会显示不一致。