css字体粗细font-weight normal bold应用
2022-04-06 06:18:38
font-weight: normal 与 font-weight: bold 是CSS中控制文本粗细的核心属性，分别用于正文可读性和视觉层次强化。以下是具体应用与注意事项：
一、font-weight: normal 的应用- 定义：表示正常粗细的字体，等同于数值 400，是浏览器默认的字体粗细。
- 适用场景：
正文内容：如段落、说明文字等不需要强调的部分，保证文本清晰易读。
示例：p { font-weight: normal; /* 段落文本保持默认粗细 */}
- 定义：表示加粗字体，等同于数值 700，用于突出显示重要信息。
- 适用场景：
标题：如 h1、h2 等，增强标题的视觉权重。
强调语句：如 <strong> 标签内的文本，引导用户注意力。
按钮文字：提升按钮的可点击性和重要性。
示例：h1, strong, button { font-weight: bold; /* 标题、强调文本、按钮文字加粗 */}
字体支持问题：
并非所有字体都支持完整的粗细层级（如 100-900）。若字体缺少对应字重，浏览器可能自动模拟加粗（伪粗体），导致显示效果不理想。
解决方案：
使用 Web 安全字体（如 Arial、Helvetica），normal 和 bold 通常表现稳定。
使用 自定义字体（如 @font-face）时，确保加载了对应字重文件（如 400.woff2、700.woff2）。
扩展控制：
除 normal 和 bold 外，可通过以下方式实现更精细的粗细控制：
关键字：lighter（比父元素更细）、bolder（比父元素更粗）。
数值：100（极细）到 900（极粗），以 100 为单位递增。
示例：.fine-text { font-weight: 300; /* 细体 */}.heavy-text { font-weight: 800; /* 超粗 */}
结构化排版：
正文使用 normal，标题和强调内容使用 bold，形成清晰的视觉层次。
避免过度使用 bold，以免降低信息传递效率。
性能优化：
自定义字体时，仅加载必要的字重文件（如 400 和 700），减少资源消耗。
使用 font-display: swap; 避免字体加载时的文本不可见问题。
响应式设计：
在小屏幕设备上，可适当减少 bold 的使用，提升空间利用率。
掌握 normal 和 bold 的基本应用，结合字体兼容性处理，可显著提升页面的可读性和视觉层次。
热门标签
