使用font-weight属性控制表格文字粗细，可通过CSS选择器针对th、td等元素设置不同粗细，结合font-size、color、text-align等属性优化视觉效果，并利用CSS变量统一管理样式，提升可维护性。
CSS表格文字粗细，说白了就是控制表格里文字的显示效果，让它更醒目或者更符合整体设计。其实方法很简单，用
font-weight属性就搞定了。
设置CSS表格文字粗细，直接用
font-weight属性，指定数值（100-900）或者预设值（bold、normal等）。
如何针对不同表格元素设置不同的文字粗细？
有时候，你可能不想让整个表格的文字都一样粗细，比如表头要加粗显示，数据行则保持正常。这时候就需要更精细的控制。
首先，你需要理解CSS选择器的强大。你可以针对特定的表格元素，比如
<th>（表头）、
<td>（数据单元格）来分别设置
font-weight。举个例子：
立即学习“前端免费学习笔记（深入）”；
th {
font-weight: bold; /* 表头文字加粗 */
}
td {
font-weight: normal; /* 数据单元格文字正常粗细 */
}这样，表头文字就会加粗，而数据单元格的文字则保持默认的粗细。
更进一步，如果你的表格结构更复杂，或者你想针对特定行的文字进行设置，可以使用类选择器或者ID选择器。比如，给某个
<tr>（表格行）添加一个类名
highlight，然后：
<tr class="highlight"> <td>...</td> <td>...</td> </tr>
.highlight td {
font-weight: bold; /* 高亮行的单元格文字加粗 */
}这样，只有带有
highlight类的行的单元格文字才会加粗。
还有一种情况，你可能需要根据数据内容来动态设置文字粗细。这通常需要结合JavaScript来实现。比如，如果某个单元格的数据大于某个阈值，就将其加粗显示。这涉及到DOM操作和CSS样式的动态修改，稍微复杂一些，但原理是一样的：找到目标元素，然后修改其
font-weight属性。
总而言之，CSS表格文字粗细的设置，关键在于灵活运用CSS选择器，找到你需要修改的目标元素，然后使用
font-weight属性来控制文字的粗细。
除了font-weight
，还有哪些CSS属性会影响表格文字的视觉效果？
font-weight确实是控制文字粗细的主要属性，但要让表格文字看起来更舒服、更美观，还需要考虑其他一些CSS属性。
font-size
(字体大小)：这个不用多说，文字的大小直接影响可读性。表头文字通常会比数据单元格的文字稍大一些，以突出显示。font-family
(字体)：不同的字体有不同的视觉风格。选择一种适合你的表格内容的字体，可以提升整体的美观度。color
(文字颜色)：文字颜色与背景颜色之间的对比度很重要。确保文字清晰可见，避免使用过于刺眼的颜色组合。text-align
(文本对齐方式)：表格中的文字对齐方式也很重要。通常，数字类型的文字会右对齐，文本类型的文字会左对齐。vertical-align
(垂直对齐方式)：这个属性控制文字在单元格中的垂直对齐方式。常用的值有top
、middle
、bottom
。line-height
(行高)：适当的行高可以增加文字的呼吸空间，提升可读性。letter-spacing
(字母间距)：调整字母间距可以改变文字的疏密程度，但通常不建议过度调整，以免影响可读性。word-spacing
(单词间距)：与字母间距类似，调整单词间距可以改变单词之间的距离。text-shadow
(文字阴影)：可以给文字添加阴影效果，但要谨慎使用，避免过度使用导致文字模糊不清。text-transform
(文字转换)：可以将文字转换为大写、小写或首字母大写。
这些属性可以组合使用，来达到你想要的表格文字视觉效果。比如，你可以将表头文字设置为加粗、字体稍大、颜色深一些，以突出显示。而数据单元格的文字则可以设置为正常粗细、字体较小、颜色浅一些，以降低视觉干扰。
记住，关键在于平衡，不要过度使用任何一个属性，以免影响表格的整体美观度和可读性。
如何使用CSS变量简化表格文字样式的管理？
CSS变量，也叫做自定义属性，是CSS中一种强大的工具，可以用来存储和复用样式值。在管理表格文字样式时，使用CSS变量可以大大简化代码，提高可维护性。
首先，你需要定义一些CSS变量，用来存储常用的文字样式值。通常，我们会将这些变量定义在
:root伪类中，这样它们就可以在整个文档中使用。
:root {
--table-font-family: Arial, sans-serif;
--table-font-size: 14px;
--table-font-color: #333;
--table-header-font-weight: bold;
--table-header-font-color: #666;
}这里，我们定义了几个变量，分别存储了表格的字体、字体大小、文字颜色、表头文字粗细和表头文字颜色。
接下来，你就可以在表格的CSS样式中使用这些变量了。使用
var()函数来引用变量。
table {
font-family: var(--table-font-family);
font-size: var(--table-font-size);
color: var(--table-font-color);
}
th {
font-weight: var(--table-header-font-weight);
color: var(--table-header-font-color);
}这样，表格和表头的文字样式就都使用了CSS变量中定义的值。
使用CSS变量的好处是，如果你想修改表格的整体文字样式，只需要修改变量的值即可，而不需要修改每一处使用了这些样式的代码。比如，如果你想将表格的字体改为
Verdana，只需要修改
--table-font-family变量的值即可。
:root {
--table-font-family: Verdana, sans-serif; /* 修改字体 */
}所有使用了
--table-font-family变量的元素，其字体都会自动更新为
Verdana。
此外，CSS变量还可以用于更复杂的场景，比如根据不同的媒体查询，设置不同的文字样式。
@media (max-width: 768px) {
:root {
--table-font-size: 12px; /* 在小屏幕上使用更小的字体 */
}
}总而言之，使用CSS变量可以使表格文字样式的管理更加灵活、高效和可维护。这是一个值得掌握的CSS技巧。
