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; /* 先显示备用字体 */
}
视觉关系图[编辑 | 编辑源代码]
计算公式[编辑 | 编辑源代码]
相对单位计算示例（基于父元素16px）：
最佳实践建议[编辑 | 编辑源代码]
- 优先使用系统默认字体栈保证性能
- 限制自定义字体数量以减少HTTP请求
- 始终提供备用字体族
- 使用相对单位（如rem）增强可访问性
通过掌握这些CSS字体样式技术，开发者可以创建既美观又功能强大的文本呈现效果。