玩转CSS字体与颜色：打造视觉盛宴的网页艺术 第二回

字体与颜色是网页设计的灵魂，它们不仅传递信息，更塑造品牌形象与用户体验。掌握CSS字体与颜色技巧，让你的网页设计瞬间提升专业感！

字体属性：文字的"外貌管理"

1. font-family - 字体系列选择器

body {
  /* 优先使用Poppins，若无则使用系统默认无衬线字体 */
  font-family: 'Poppins', sans-serif;
}

/* 优雅的字体回退方案 */
.heading {
  font-family: 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

最佳实践：

• 优先使用Web安全字体（如Arial, Helvetica）
• 引入Google Fonts等网络字体时提供备用字体
• 中文字体需考虑体积：font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

2. font-size - 字体大小控制

h1 {
  /* 绝对单位 - 像素 */
  font-size: 32px;
}

p {
  /* 相对单位 - 根元素相对大小 */
  font-size: 1.125rem; /* 18px (16px × 1.125) */
}

.small-text {
  /* 相对单位 - 父元素相对大小 */
  font-size: 0.875em; /* 父元素字体的87.5% */
}

单位选择指南：

• px：固定尺寸元素
• rem：响应式设计的首选
• em：相对父元素的组件设计
• vw/vh：视口比例，适合标题

3. font-weight - 字体粗细调节

.light-text {
  font-weight: 300; /* 细体 */
}

.normal-text {
  font-weight: 400; /* 常规 */
}

.bold-text {
  font-weight: 700; /* 粗体 */
}

.extra-bold {
  font-weight: 900; /* 特粗 */
}

注意：使用数字值比bold/normal更精确控制

4. font-style - 字体风格设置

.italic-text {
  font-style: italic; /* 斜体 */
}

.oblique-text {
  font-style: oblique 14deg; /* 倾斜14度 */
}

.normal-style {
  font-style: normal; /* 取消斜体 */
}

文本装饰：细节决定品质

5. text-decoration - 文本装饰线

.underline {
  text-decoration: underline solid #ff6b6b; /* 红色实线下划线 */
}

.strikethrough {
  text-decoration: line-through; /* 删除线 */
}

.fancy-link {
  text-decoration: underline wavy #70eca6; /* 绿色波浪线 */
}

.no-decoration {
  text-decoration: none; /* 清除装饰 */
}

6. letter-spacing - 字符间距调整

.tight-spacing {
  letter-spacing: -0.5px; /* 紧凑间距 */
}

.normal-spacing {
  letter-spacing: 0; /* 默认间距 */
}

.wide-spacing {
  letter-spacing: 2px; /* 宽松间距 - 提升标题高级感 */
}

.uppercase-wide {
  text-transform: uppercase;
  letter-spacing: 4px; /* 大写字母加宽间距 */
}

7. text-transform - 文本大小写转换

.uppercase {
  text-transform: uppercase; /* 全部大写 */
}

.lowercase {
  text-transform: lowercase; /* 全部小写 */
}

.capitalize {
  text-transform: capitalize; /* 单词首字母大写 */
}

.small-caps {
  font-variant: small-caps; /* 小型大写字母 */
}

8. text-align - 文本对齐方式

.left-align {
  text-align: left; /* 左对齐 */
}

.center-align {
  text-align: center; /* 居中对齐 */
}

.right-align {
  text-align: right; /* 右对齐 */
}

.justify-align {
  text-align: justify; /* 两端对齐 */
}

9. line-height - 行高设置

.single-space {
  line-height: 1; /* 单倍行距 */
}

.readable-space {
  line-height: 1.6; /* 最佳阅读行距 */
}

.double-space {
  line-height: 2; /* 双倍行距 */
}

.responsive-space {
  line-height: 1.4; /* 基础行距 */
  
  @media (min-width: 768px) {
    line-height: 1.6; /* 大屏幕上增加行距 */
  }
}

色彩魔法：网页的视觉语言

10. color - 文本颜色设置

.primary-text {
  color: #70eca6; /* 十六进制绿色 */
}

.secondary-text {
  color: rgb(137, 97, 223); /* RGB紫色 */
}

.accent-text {
  color: hsl(259, 66%, 63%); /* HSL紫色 */
}

.dynamic-color {
  color: var(--primary-color); /* CSS变量 */
}

颜色表示法对比：

方法	示例	特点
十六进制	#70eca6	最常用，简洁高效
RGB	rgb(112, 236, 166)	红绿蓝三原色表示
RGBA	rgba(112, 236, 166, 0.8)	带透明度控制
HSL	hsl(259, 66%, 63%)	色相-饱和度-明度，更直观

11. background-color - 背景颜色设置

.card {
  background-color: #ffffff; /* 纯白背景 */
}

.alert {
  background-color: rgba(255, 107, 107, 0.1); /* 半透明红色背景 */
}

.gradient-bg {
  background: linear-gradient(135deg, #70eca6, #8961df); /* 渐变背景 */
}

.theme-section {
  background-color: var(--section-bg, #f8f9fa); /* 带默认值的变量 */
}

实战技巧：字体与颜色的完美组合

12. 创建色彩系统

:root {
  /* 主色系 */
  --primary: #8961df;
  --primary-light: #b39bf2;
  --primary-dark: #5d3ac0;
  
  /* 辅助色 */
  --secondary: #70eca6;
  --accent: #ff6b6b;
  
  /* 中性色 */
  --dark: #2d3748;
  --light: #f8f9fa;
}

body {
  color: var(--dark);
  background-color: var(--light);
}

.button {
  background-color: var(--primary);
  color: white;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: var(--primary-dark);
}

13. 响应式排版系统

:root {
  --font-base: 1rem;
  --scale: 1.25;
  
  --font-sm: calc(var(--font-base) / var(--scale));
  --font-md: var(--font-base);
  --font-lg: calc(var(--font-base) * var(--scale));
  --font-xl: calc(var(--