CSS3 中的字体及相关属性详解（2025 年最新实践）CSS3 对字体相关的属性进行了大幅增强，特别是 @font-face 的普及让 Web 字体变得灵活可靠。下面从基础属性到高级特性全面梳理。1. 核心字体属性（font-*）

属性说明常见值 / 示例注意事项
font-family指定字体族（优先级从左到右）“PingFang SC”, “Microsoft YaHei”, sans-serif建议写 3~4 个备选字体 + 通用族（serif/sans-serif/等）
font-size字体大小16px、1rem、1em、100%、larger、small 等推荐用 rem（根元素基准）
font-weight字体粗细normal、bold、lighter、100~900（100 间隔）400=normal，700=bold，现代字体支持更细颗粒度
font-style字体风格normal、italic、obliqueoblique 是伪斜体（浏览器合成）
font-variant变体（小大写、等）normal、small-caps、all-small-caps小大写常用于标题
font复合属性（简写）font: italic bold 16px/1.5 “Arial”, sans-serif;顺序：style-weight-size/line-height-family

推荐写法（现代最佳实践）：

css

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

2. 行高与垂直居中（line-height）

属性说明推荐值
line-height行高（决定行间距）1.5~1.8（无单位）、1.6em、24px
line-height + height实现单行垂直居中line-height = height

单行垂直居中经典写法：

css

.title {
  height: 60px;
  line-height: 60px;
}

3. 文本修饰与对齐（text-*）

属性说明常见值
text-align水平对齐left、center、right、justify
text-decoration文本装饰线none、underline、overline、line-through
text-transform文本大小写转换uppercase、lowercase、capitalize
text-indent首行缩进2em（中文常见）
letter-spacing字符间距0.05em、normal
word-spacing单词间距0.1em、normal
white-space空白符处理nowrap、pre、pre-wrap 等

实用示例：

css

a {
  text-decoration: none;          /* 去掉下划线 */
}

.price {
  text-decoration: line-through;  /* 删除线（原价） */
  color: #999;
}

4. Web 字体（

@font-face）——CSS3 最重要特性语法：

css

@font-face {
  font-family: "MyCustomFont";          /* 自定义字体名 */
  src: 
    url("myfont.woff2") format("woff2"), /* 优先使用 */
    url("myfont.woff") format("woff"),   /* 兼容 */
    url("myfont.ttf") format("truetype"); /* 后备 */
  font-weight: normal;
  font-style: normal;
  font-display: swap;                   /* 关键：避免 FOUT/FOIT */
}

font-display 属性（2025 年强烈推荐）

值行为说明使用场景
auto浏览器默认（通常 block）—
block短时间空白（FOUT），然后替换为自定义字体内容优先
swap立即显示回退字体，自定义字体加载完替换（推荐）最佳实践
fallback短时间显示回退字体，超时后用系统字体—
optional只在 100ms 内加载，超时用回退字体轻量页面

推荐写法：

css

body {
  font-family: "MyCustomFont", system-ui, sans-serif;
}

5. 响应式字体（媒体查询 + clamp）现代推荐：使用 clamp() 函数实现流畅缩放

css

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem); /* 最小 2rem，理想 5vw+1rem，最大 4rem */
}

6. 变量字体（Variable Fonts）——CSS3 进阶支持范围：Chrome 62+、Safari 11.1+、Firefox 62+（2018 年起基本全覆盖）用法：

css

@font-face {
  font-family: "Inter";
  src: url("Inter-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; /* 支持 100~900 任意值 */
}

body {
  font-family: "Inter", sans-serif;
  font-weight: 450; /* 任意值 */
}

7. 常用字体栈（2025 年推荐）

场景推荐字体栈
中文“PingFang SC”, “Microsoft YaHei”, “Hiragino Sans GB”, “Heiti SC”, sans-serif
英文+通用system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif
等宽字体“SF Mono”, “JetBrains Mono”, “Consolas”, “Courier New”, monospace

8. 总结：一句话记住CSS3 字体核心：
font-family 决定外观、font-size/weight/style 决定形态、@font-face + font-display: swap 实现自定义字体、clamp() 和 rem 保证响应式。现代最佳实践：

  • 优先使用系统字体（system-ui） → 性能最好
  • 必须引入自定义字体时 → 用 woff2 + font-display: swap
  • 字体大小 → 用 rem + clamp()
  • 行高 → 1.5~1.8 倍字体大小

如果你需要具体字体引入的完整代码（例如 Google Fonts、思源黑体等），或者变量字体的演示，我可以提供更详细的示例！