CSS字体样式

CSS字体样式

CSS字体样式是用于控制网页文本外观的一组属性，包括字体族、大小、粗细、风格（如斜体）等。通过调整这些属性，开发者可以精确控制文本的视觉呈现，提升可读性和设计一致性。本条目将详细介绍CSS字体样式的核心属性和应用方法。

核心属性

font-family

定义文本的字体族。可以指定多个字体作为备选（用逗号分隔），浏览器会优先使用第一个可用字体。

/* 示例 */
p {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

效果说明：段落文本优先使用Helvetica Neue字体，若不可用则依次尝试Arial和系统默认无衬线字体。

font-size

控制字体大小，支持绝对单位（px、pt）和相对单位（em、rem、%）。

/* 不同单位示例 */
h1 { font-size: 24px; }  /* 绝对单位 */
body { font-size: 1.2em; } /* 相对单位 */

font-weight

设置字体的粗细程度，常用值：

• 关键词：normal（默认）、bold、bolder
• 数值：100-900（100为最细）

/* 数值示例 */
strong { font-weight: 700; } /* 等同于bold */

font-style

控制斜体效果：

• normal：常规文本
• italic：使用斜体版本
• oblique：人工倾斜文本

em { font-style: italic; }

复合属性 font

通过font简写属性可同时设置多个值，顺序为： font-style font-weight font-size/line-height font-family

/* 简写示例 */
p {
  font: italic 700 1.2em/1.5 "Times New Roman", serif;
}

高级特性

@font-face规则

允许使用自定义字体（需提供字体文件）：

@font-face {
  font-family: "MyCustomFont";
  src: url("myfont.woff2") format("woff2");
}
body { font-family: "MyCustomFont"; }

字体特性设置（font-feature-settings）

启用OpenType字体高级特性：

/* 启用连字 */
h1 { font-feature-settings: "liga", "dlig"; }

实际应用案例

响应式字体

结合媒体查询实现不同屏幕尺寸下的字体优化：

html { font-size: 16px; }
@media (min-width: 768px) {
  html { font-size: 18px; }
}

字体加载优化

使用font-display控制字体加载期间的显示行为：

@font-face {
  font-family: "OptimizedFont";
  src: url("font.woff2");
  font-display: swap; /* 先显示备用字体 */
}

视觉关系图

graph TD A[CSS字体样式] --> B[基础属性] A --> C[高级特性] B --> D[font-family] B --> E[font-size] B --> F[font-weight] B --> G[font-style] C --> H[@font-face] C --> I[font-feature-settings]

计算公式

相对单位计算示例（基于父元素16px）： $1.5em=1.5\times 16px=24px$

最佳实践建议

• 优先使用系统默认字体栈保证性能
• 限制自定义字体数量以减少HTTP请求
• 始终提供备用字体族
• 使用相对单位（如rem）增强可访问性

通过掌握这些CSS字体样式技术，开发者可以创建既美观又功能强大的文本呈现效果。