如何在HTML表格中通过font-weight属性自定义单元格文字粗细-html教程-PHP中文网

css表格文字粗细通过font-weight属性设置，需配合选择器（如th、td）、字体字重支持及样式优先级生效；th默认加粗但易被覆盖，显式声明更可靠，td默认normal（400），数值须为100-900整百数且字体文件需提供对应字重。

如何在html表格中通过font-weight属性自定义单元格文字粗细

font-weight 在表格里不是“写了就生效”，它得配合选择器、字体支持和样式优先级一起工作。直接写 td { font-weight: 700; } 很可能没反应——这不是你代码写错了，而是下面几个环节卡住了。

表格表头通常要更醒目，数据单元格保持克制，这是最常见需求。关键不是堆属性，而是选对元素、避开默认样式干扰：

th 默认浏览器会加粗（font-weight: bold），但这是用户代理样式，容易被其他规则覆盖；显式写 th { font-weight: 600; } 更可靠
td 默认是 normal（即 400），但某些 UI 框架（如 Bootstrap）会全局重置为 font-weight: 400 或 normal，导致你写的 700 被压制
想只加粗某列？用属性选择器：td[data-type="price"] { font-weight: 800; }，比硬加 class 更灵活
避免用 !important —— 它能临时压住冲突，但会让后续维护变困难；优先检查 DevTools 中 Styles 面板里 font-weight 是否被划掉

数值再大，字体文件不提供对应字重，浏览器就只能降级。这不是 bug，是字体本身的限制：

html-deploy

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

下载

系统字体（如 Windows 的微软雅黑、macOS 的 -apple-system）普遍只含 400 和 700 两级，800、900 实际无效
Google Fonts 必须显式加载字重：链接里漏了 wght@900，比如只写 ?family=Inter，那 font-weight: 900 就不会渲染
自定义字体用 @font-face 时，font-weight 值必须和 .woff2 文件内嵌的元数据完全一致，差一点（比如声明 800 但文件实际是 700）就会匹配失败
运行时验证可用：document.fonts.check('900 Inter')，但得等 document.fonts.load() 完成后再调，否则返回 false

表格里常把链接塞进 td，结果加粗不起作用——问题不在表格，而在链接本身：

a 标签默认 font-weight: 400，但很多 CSS 重置库（如 normalize.css）会把它设为 normal，而 normal 和 400 在多数场景下等价，但某些字体下视觉差异明显
不要写 font-weight: "bold" —— 引号是语法错误，浏览器直接忽略整条声明
慎用 bolder：如果父容器是 400，bolder 变成 700；但如果父已经是 700，而字体没有 800，它就卡在 700 不动
非整百值如 650 全部无效，浏览器静默 fallback 到最近的整百数（通常是 600 或 700）

如果你的项目里表格样式多、要频繁调整，硬编码数值很快会失控。变量不是炫技，是降低出错概率的实际手段：

定义语义化变量：:root { --fw-table-header: 600; --fw-table-body: 400; --fw-table-highlight: 800; }
应用时清晰可读：th { font-weight: var(--fw-table-header); }、.urgent-cell { font-weight: var(--fw-table-highlight); }
变量值仍用标准档位（400/500/600/700），不用 523 这类非标数——浏览器不认
变量不能绕过字体支持问题：就算 --fw-table-highlight 设成 900，字体没这档，照样降级