CSS font-weight 属性全面解析
概述
CSS font-weight 属性是控制文本粗细程度的重要CSS属性，用于定义字体的视觉重量。该属性的可用取值取决于浏览器所使用的字体系列，在网页排版中扮演着至关重要的角色，为设计师和开发者提供了精确的文本视觉表现控制能力。
属性语法与取值
基本语法结构
selector {
font-weight: value;
}
属性值详解
关键字值
/* 常规字重 */
.normal {
font-weight: normal; /* 默认值，数值等效于400 */
}
/* 加粗显示 */
.bold {
font-weight: bold; /* 加粗，数值等效于700 */
}
/* 相对更细 */
.lighter {
font-weight: lighter; /* 比父元素更细 */
}
/* 相对更粗 */
.bolder {
font-weight: bolder; /* 比父元素更粗 */
}
数值精度控制
/* 细体字重 */
.thin {
font-weight: 100; /* 超细体 */
}
.light {
font-weight: 300; /* 细体 */
}
.regular {
font-weight: 400; /* 常规体 */
}
.medium {
font-weight: 500; /* 中等体 */
}
.semibold {
font-weight: 600; /* 半粗体 */
}
.bold {
font-weight: 700; /* 粗体 */
}
.heavy {
font-weight: 900; /* 超粗体 */
}
实际应用示例
基础文本样式设置
/* 正文内容样式 */
.content-text {
font-weight: 400;
line-height: 1.6;
font-size: 16px;
color: #333;
}
/* 标题强调样式 */
.main-heading {
font-weight: 700;
font-size: 2rem;
margin-bottom: 1rem;
color: #222;
}
/* 辅助信息样式 */
.caption {
font-weight: 300;
font-size: 0.875rem;
color: #666;
}
全局字体权重设置
/* 基础文档设置 */
body {
font-weight: 400;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.5;
}
/* 标题层级系统 */
h1 { font-weight: 700; font-size: 2.5rem; }
h2 { font-weight: 600; font-size: 2rem; }
h3 { font-weight: 500; font-size: 1.5rem; }
h4 { font-weight: 500; font-size: 1.25rem; }
复合属性应用
响应式字体权重
/* 移动端优化 */
.mobile-text {
font-weight: 400;
font-size: 14px;
}
/* 平板设备适配 */
@media (min-width: 768px) {
.tablet-text {
font-weight: 500;
font-size: 16px;
}
}
/* 桌面端优化 */
@media (min-width: 1024px) {
.desktop-text {
font-weight: 400;
font-size: 18px;
}
}
交互效果示例
/* 导航链接交互 */
.nav-link {
font-weight: 400;
transition: font-weight 0.2s ease;
}
.nav-link:hover {
font-weight: 600;
}
.nav-link.active {
font-weight: 700;
}
/* 按钮样式 */
.btn {
font-weight: 500;
padding: 12px 24px;
border: none;
border-radius: 6px;
transition: all 0.3s ease;
}
.btn-primary {
font-weight: 600;
background-color: #007bff;
color: white;
}
.btn-primary:hover {
font-weight: 700;
background-color: #0056b3;
}
完整示例演示
HTML 结构示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体权重示例</title>
<style>
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.weight-demo {
margin: 20px 0;
padding: 15px;
border-left: 4px solid #007bff;
background-color: #f8f9fa;
}
.weight-100 { font-weight: 100; }
.weight-300 { font-weight: 300; }
.weight-400 { font-weight: 400; }
.weight-500 { font-weight: 500; }
.weight-600 { font-weight: 600; }
.weight-700 { font-weight: 700; }
.weight-900 { font-weight: 900; }
</style>
</head>
<body>
<h1>CSS font-weight 属性演示</h1>
<div class="weight-demo weight-100">
<h3>100 - 超细体 (Thin)</h3>
<p>这段文字使用超细字体权重，适合用于次要信息或装饰性文本。</p>
</div>
<div class="weight-demo weight-300">
<h3>300 - 细体 (Light)</h3>
<p>这段文字使用细字体权重，具有良好的可读性，适合正文内容。</p>
</div>
<div class="weight-demo weight-400">
<h3>400 - 常规体 (Normal)</h3>
<p>这是默认的字体权重，适用于大多数正文内容。</p>
</div>
<div class="weight-demo weight-500">
<h3>500 - 中等体 (Medium)</h3>
<p>中等字体权重，适合用于强调或小标题。</p>
</div>
<div class="weight-demo weight-600">
<h3>600 - 半粗体 (Semibold)</h3>
<p>半粗体权重，适用于重要标题或需要强调的内容。</p>
</div>
<div class="weight-demo weight-700">
<h3>700 - 粗体 (Bold)</h3>
<p>粗体权重，用于主要标题和重点强调内容。</p>
</div>
<div class="weight-demo weight-900">
<h3>900 - 超粗体 (Heavy)</h3>
<p>超粗体权重，适用于需要强烈视觉冲击的标题。</p>
</div>
</body>
</html>
本节课程知识要点
-
权重层次建立：掌握建立清晰的字体权重层次结构
-
响应式适配：根据不同设备调整字体权重
-
性能优化：了解字体权重对渲染性能的影响
-
可访问性设计：确保符合无障碍访问标准
-
用户体验：通过权重变化提供视觉反馈
-
跨平台一致性：考虑不同环境的渲染差异
-
变量化管理：使用CSS变量统一管理权重系统
浏览器兼容性提示
-
现代浏览器全面支持数值精度控制（100-900）
-
部分旧版浏览器对数值精度的支持有限
-
建议在使用前测试目标浏览器的支持情况
-
中文字体需要特别注意权重变化的视觉效果
通过系统掌握 font-weight 属性的各种用法，开发者可以创建出既美观又实用的文本排版系统。
