html怎么调字体粗细？css设置字体粗细属性

这是一段细文本 (300)。

这是一段中等粗细文本 (500)。

这是一段粗体文本 (700)。

这是一段极粗文本 (900)。

“`

语义化标签与 CSS 的区别

在 HTML 中，有两个标签常被误用于改变字体粗细，但它们的主要目的是语义化而非单纯的视觉样式：

• <strong>: 表示内容具有强烈的强调意义，浏览器默认样式通常将其渲染为粗体，但其核心价值在于告诉屏幕阅读器和搜索引擎该内容很重要。
• <b>: 表示文本在视觉上与其他文本不同（如关键词、产品名），但不一定具有强烈的语义重要性。

最佳实践建议：

• 如果你希望文本

  

  看起来更粗，请使用 CSS font-weight。

• 如果你希望文本在语义上被强调（例如法律条款中的关键部分），请使用 <strong>，并可以通过 CSS 进一步调整其 font-weight 以达到理想的视觉效果。

注意事项与兼容性

1. 字体支持：使用 100-900 的数值时，确保你使用的字体文件（如 Google Fonts 中的 Roboto, Open Sans 等）包含了这些粗细变体，如果字体只支持 Normal 和 Bold，设置 font-weight: 500 可能不会有任何视觉变化，或者浏览器会尝试模拟加粗。
2. 移动端渲染：在某些移动设备上，模拟加粗（即字体不支持该粗细时）可能导致文字边缘模糊，建议优先使用字体自带的变体。
3. 继承性：font-weight 是可继承属性，如果父元素设置了

   font-weight: bold，子元素默认也会是粗体，除非被显式覆盖。

   

相关问题与解答

问题 1：为什么我设置了 font-weight: 300，但文本看起来和 400 没有区别？

解答：

这通常是因为你当前使用的字体文件（Font Family）不包含 300 粗细的变体，字体文件是由设计师或字体厂商创建的，每个字体支持的粗细层级不同，某些免费字体可能只提供 Regular (400) 和 Bold (700) 两个版本。

• 解决方法：
  1. 检查字体文档,确认该字体是否支持 300 粗细。
  2. 更换为支持多粗细的字体,如 Google Fonts 中的 “Roboto”、”Open Sans” 或 “Noto Sans SC”（支持中文且粗细丰富）。
  3. 使用 @font-face 加载包含所需粗细的字体文件。

问题 2：font-weight: bold 和 font-weight: 700 有什么区别？应该用哪一个？

解答：

在绝大多数情况下，bold 和 700 的效果是完全相同的，因为 CSS 规范将 bold 映射为数值 700。

• 细微差别：bold 是一个关键字，更具可读性，表明你的意图是“加粗”，而 700 是一个数值，允许你更精确地控制（如果你需要 600 或 800，就必须用数值）。
• 建议：如果你只需要标准的粗体效果，使用 bold 更符合语义和可读性；如果你需要介于 400 和 700 之间（如 500）或更粗（如 800、900）的效果，则必须使用数值，在现代开发中，为了保持一致性，许多开发者倾向于统一使用数值（如 400, 500, 700）。