设置css字体粗细主要通过font-weight属性实现，可使用数值100至900或normal、bold等关键字控制；1. 数值设置更精细，如400为正常、700为粗体；2. 关键字设置简单但灵活性较低，bolder和lighter为相对值；3. font-weight具有继承性，子元素未显式设置时会继承父元素值；4. 字体显示效果受字体本身、浏览器及操作系统影响，建议进行多平台测试；5. 可使用css变量提高维护性，如定义--font-weight-normal并用var调用。
设置CSS字体粗细，主要通过font-weight属性来实现，你可以用数值或者预设的关键字来控制字体的粗细程度。数值从100到900，关键字则包括normal、bold、bolder、lighter等。
font-weight属性详细设置方法
字体的粗细控制在网页设计中至关重要，它直接影响到页面的可读性和视觉层次。font-weight属性是CSS中用于设置字体粗细的关键属性，它接受数值或预定义的关键字作为值。
立即学习“前端免费学习笔记（深入）”；
使用数值设置字体粗细
font-weight属性允许使用100到900之间的数值来精确控制字体粗细。这些数值对应不同的粗细级别，其中400通常等同于normal，而700等同于bold。
- 100: Thin (极细)
- 200: Extra Light (特细)
- 300: Light (细)
- 400: Normal (正常) - 默认值
- 500: Medium (中等)
- 600: Semi Bold (半粗)
- 700: Bold (粗)
- 800: Extra Bold (特粗)
- 900: Black / Heavy (黑体)
例如，你可以这样设置一个段落的字体粗细：
p {
font-weight: 600; /* 设置为半粗 */
}这种方法的好处是，你可以根据具体的设计需求，更加精细地调整字体粗细。但需要注意的是，并非所有字体都支持所有数值，某些字体可能只支持其中的一部分。
使用关键字设置字体粗细
除了数值，font-weight属性还支持一些预定义的关键字，这些关键字提供了一种更简单的方式来设置字体粗细。
- normal: 正常的字体粗细 (等同于 400)
- bold: 粗体 (等同于 700)
- bolder: 比继承的字体更粗
- lighter: 比继承的字体更细
例如：
h1 {
font-weight: bold; /* 设置为粗体 */
}
span {
font-weight: bolder; /* 比父元素更粗 */
}使用关键字的好处是简单易懂，但在精细控制方面不如数值灵活。bolder和lighter是相对值，它们会根据父元素的字体粗细来调整，这在某些情况下非常有用。
字体粗细继承问题
font-weight属性具有继承性，这意味着如果一个元素没有显式设置font-weight，它会继承父元素的font-weight值。这在构建复杂的页面结构时需要特别注意。例如，如果你希望某个元素的字体粗细不继承父元素，你需要显式地设置它的font-weight。
<div style="font-weight: bold;"> <p>这段文字是粗体。</p> <span style="font-weight: normal;">这段文字是正常粗细。</span> </div>
在这个例子中，div元素设置了font-weight: bold，所以p元素会继承这个样式。但是，span元素显式地设置了font-weight: normal，所以它不会继承父元素的粗体样式。
哪些因素会影响字体粗细的显示效果？
字体粗细的显示效果受到多种因素的影响，包括字体本身的特性、浏览器对字体的渲染方式、以及操作系统对字体的支持程度。不同的字体在相同的font-weight值下，显示效果可能会有所不同。例如，一些字体本身就比较粗，即使设置为normal，看起来也比其他字体更粗。
此外，浏览器和操作系统也可能对字体进行优化和调整，这也会影响字体粗细的显示效果。因此，在设计网页时，最好在不同的浏览器和操作系统上进行测试，以确保字体粗细的显示效果符合预期。
如何解决字体粗细在不同浏览器上的差异？
由于不同浏览器对字体的渲染方式可能存在差异，因此字体粗细在不同浏览器上的显示效果可能会有所不同。为了解决这个问题，可以尝试以下方法：
- 使用标准字体: 选择一些常见的、在各种浏览器上显示效果都比较一致的字体，例如Arial、Helvetica、Verdana等。
- 使用数值代替关键字: 尽量使用数值来精确控制字体粗细，而不是使用关键字。数值可以提供更精细的控制，减少浏览器之间的差异。
- 进行浏览器兼容性测试: 在不同的浏览器上测试网页，并根据测试结果进行调整。可以使用浏览器的开发者工具来检查字体粗细的显示效果，并进行相应的修改。
- 使用CSS Reset: 使用CSS Reset可以消除浏览器默认样式带来的差异，从而减少字体粗细在不同浏览器上的差异。
如何使用CSS变量来控制字体粗细？
CSS变量（也称为自定义属性）是一种强大的工具，可以用于在CSS中存储和重用值。你可以使用CSS变量来控制字体粗细，从而提高代码的可维护性和灵活性。
首先，在:root选择器中定义CSS变量：
:root {
--font-weight-normal: 400;
--font-weight-bold: 700;
}然后，在需要设置字体粗细的地方使用这些变量：
p {
font-weight: var(--font-weight-normal);
}
h1 {
font-weight: var(--font-weight-bold);
}这样，如果你需要修改字体粗细，只需要修改CSS变量的值即可，而不需要修改每个元素的font-weight属性。这大大提高了代码的可维护性。
此外，你还可以使用JavaScript来动态修改CSS变量的值，从而实现更灵活的字体粗细控制。例如，你可以根据用户的选择来动态修改字体粗细。
总的来说，font-weight属性是CSS中用于设置字体粗细的关键属性。你可以使用数值或预定义的关键字来控制字体的粗细程度。在实际应用中，需要考虑到字体本身的特性、浏览器对字体的渲染方式、以及操作系统对字体的支持程度等因素。通过合理地使用font-weight属性，你可以创建出更加美观和易读的网页。
