合理使用 font-weight 和 text-decoration 可提升文本可读性与视觉层次。font-weight 控制字重，常用 normal（400）和 bold（700），支持 100–900 数值精细调节，需字体支持；text-decoration 添加装饰线，如 none、underline、line-through、overline，现代 CSS 支持样式、颜色、线型组合，如波浪红线下划线。结合两者增强信息层级，避免过度加粗，注意小字号下细体与下划线的辨识度，确保可点击元素有明确视觉提示，根据语义选择样式，提升用户体验。
在网页设计中，文字的可读性和视觉表现力至关重要。通过合理使用CSS中的 font-weight 和 text-decoration 属性，可以显著提升文本的表现效果。这两个属性虽然简单，但掌握其用法和技巧能让你的页面更具专业感。
font-weight：控制字体粗细
font-weight 用于设置文本的字重（粗细程度），常见取值包括 normal、bold，以及数值形式如 400（等于 normal）、700（等于 bold）等。
- normal 或 400：标准字重，适合正文内容
- bold 或 700：加粗显示，常用于标题或强调文字
- 100–900：以100为增量的数值，支持更精细的控制（需字体文件支持）
例如：
h1 {
font-weight: 600; /* 稍微加粗，比默认bold柔和 */
}
em {
font-weight: 300; /* 细体，突出对比 */
}
注意：并非所有字体都支持全部字重，若指定的 weight 没有对应字体文件，浏览器可能自动模拟或回退。
立即学习“前端免费学习笔记（深入）”；
text-decoration：添加文本装饰线
text-decoration 用来为文本添加下划线、删除线等装饰效果，常用于链接样式或特殊标注。
- none：去除默认装饰，比如去掉链接的下划线
- underline：添加下划线，适用于链接或强调项
- line-through：贯穿线，适合表示删除内容或原价
- overline：上划线，较少使用，可用于特殊视觉效果
示例：
a {
text-decoration: none; /* 去除链接下划线 */
}
a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
.strikethrough {
text-decoration: line-through;
}
现代CSS还支持更细致的控制，如：
.text-fancy {
text-decoration: underline wavy red; /* 波浪形红色下划线 */
}
你可以同时设置装饰线的样式（solid, wavy, dotted等）、颜色和位置。
实用技巧与注意事项
结合 font-weight 和 text-decoration 能增强信息层级和用户体验。
- 避免过度加粗，过多 bold 文本会降低阅读舒适度
- 为可点击元素（如链接）提供明确的装饰提示，提升可用性
- 使用细字体（如 300）搭配下划线时注意清晰度，小字号可能影响辨识
- 在暗色背景下，调整
可确保装饰线可见
基本上就这些。合理运用 font-weight 和 text-decoration，不需要复杂代码也能让文本更有层次和表现力。关键是根据内容语义选择合适的样式，而不是单纯追求视觉效果。
