编辑“︁CSS字体样式”︁（章节）

= CSS字体样式 =

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

== 核心属性 ==

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

<syntaxhighlight lang="css">
/* 示例 */
p {
  font-family: "Helvetica Neue", Arial, sans-serif;
}
</syntaxhighlight>

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

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

<syntaxhighlight lang="css">
/* 不同单位示例 */
h1 { font-size: 24px; }  /* 绝对单位 */
body { font-size: 1.2em; } /* 相对单位 */
</syntaxhighlight>

=== font-weight ===
设置字体的粗细程度，常用值：
* 关键词：<code>normal</code>（默认）、<code>bold</code>、<code>bolder</code>
* 数值：100-900（100为最细）

<syntaxhighlight lang="css">
/* 数值示例 */
strong { font-weight: 700; } /* 等同于bold */
</syntaxhighlight>

=== font-style ===
控制斜体效果：
* <code>normal</code>：常规文本
* <code>italic</code>：使用斜体版本
* <code>oblique</code>：人工倾斜文本

<syntaxhighlight lang="css">
em { font-style: italic; }
</syntaxhighlight>

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

<syntaxhighlight lang="css">
/* 简写示例 */
p {
  font: italic 700 1.2em/1.5 "Times New Roman", serif;
}
</syntaxhighlight>

== 高级特性 ==

=== @font-face规则 ===
允许使用自定义字体（需提供字体文件）：

<syntaxhighlight lang="css">
@font-face {
  font-family: "MyCustomFont";
  src: url("myfont.woff2") format("woff2");
}
body { font-family: "MyCustomFont"; }
</syntaxhighlight>

=== 字体特性设置（font-feature-settings） ===
启用OpenType字体高级特性：

<syntaxhighlight lang="css">
/* 启用连字 */
h1 { font-feature-settings: "liga", "dlig"; }
</syntaxhighlight>

== 实际应用案例 ==

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

<syntaxhighlight lang="css">
html { font-size: 16px; }
@media (min-width: 768px) {
  html { font-size: 18px; }
}
</syntaxhighlight>

=== 字体加载优化 ===
使用<code>font-display</code>控制字体加载期间的显示行为：

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

== 视觉关系图 ==
<mermaid>
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]
</mermaid>

== 计算公式 ==
相对单位计算示例（基于父元素16px）：
<math>1.5em = 1.5 \times 16px = 24px</math>

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

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

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]