CSS字体样式（font）[实战指南]
1. 字体家族（font-family）的实战技巧
font-family是CSS中最基础的字体属性，它决定了元素中文本的显示字体。但很多新手开发者容易忽略字体栈（font stack）的重要性。我在实际项目中见过太多直接写font-family: "Microsoft YaHei"的案例，这种写法在跨平台时很容易出现字体回退问题。
一个健壮的字体栈应该包含3-4个备选字体。我通常这样构建：
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }这个组合覆盖了主流操作系统：-apple-system和BlinkMacSystemFont适配macOS/iOS，Segoe UI适配Windows，Roboto适配Android，Oxygen和Ubuntu适配Linux。最后的sans-serif是通用字体族的保险。
对于中文环境，我推荐这样的方案：
.chinese-text { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; }这里有个实用技巧：带空格的字体名必须用引号包裹。我曾遇到一个诡异bug，排查半天发现是因为漏写了"Segoe UI"的引号。
2. 字体粗细（font-weight）的深度解析
font-weight不仅支持bold/normal这样的关键字，还支持100-900的数值。但很多人不知道这些数值的实际效果取决于字体文件本身。我在使用思源黑体时发现一个有趣现象：
@font-face { font-family: "Source Han Sans"; src: url("SourceHanSansCN-Normal.otf") format("opentype"); font-weight: 400; } @font-face { font-family: "Source Han Sans"; src: url("SourceHanSansCN-Bold.otf") format("opentype"); font-weight: 700; }即使指定font-weight: 500，浏览器也会自动选择最接近的可用权重（400或700）。这就是为什么有时候设置500和400显示效果相同。
对于可变字体（Variable Fonts），font-weight的数值可以更精细：
.variable-font { font-family: "Inter var", sans-serif; font-weight: 387; /* 精确到个位数！ */ }3. 字体样式（font-style）的创造性应用
除了常见的italic和normal，font-style的oblique值往往被忽视。两者的区别在于：
- italic使用专门的斜体字形文件
- oblique只是对常规字体进行倾斜变换
在Google Fonts中这样使用：
.special-text { font-family: 'Roboto', sans-serif; font-style: oblique 15deg; /* 自定义倾斜角度！ */ }这个特性在CSS Fonts Module Level 4中引入，目前主流浏览器均已支持。
我在设计技术博客时发现一个小技巧：对代码片段使用轻微oblique可以提升可读性：
code { font-style: oblique 5deg; font-family: "Fira Code", monospace; }4. 字体大小（font-size）的响应式策略
font-size的常见误区是过度使用px单位。现代CSS提供了更灵活的方案：
方案一：相对单位组合
html { font-size: calc(1em + 0.3vw); /* 基础字号随视口变化 */ } h1 { font-size: clamp(2rem, 5vw, 3rem); /* 动态范围限制 */ }方案二：模块化缩放
:root { --text-base-size: 1em; --text-scale-ratio: 1.2; --text-xs: calc(var(--text-base-size) / var(--text-scale-ratio)); --text-sm: var(--text-base-size); --text-md: calc(var(--text-base-size) * var(--text-scale-ratio)); /* 更多级别... */ }在移动端项目中，我习惯添加这样的防爆界处理：
body { font-size: 16px; -webkit-text-size-adjust: 100%; /* 禁止Safari自动缩放 */ }5. 字体变体（font-variant）的实用场景
font-variant-small-caps可以将小写字母显示为缩小的大写字母，这在排版中有特殊用途：
.abbreviation { font-variant: small-caps; letter-spacing: 0.05em; /* 添加轻微字距 */ }显示效果：HTML → Hᴛᴍʙ
对于数字排版，font-variant-numeric非常实用：
.price { font-variant-numeric: tabular-nums; /* 等宽数字对齐 */ } .fraction { font-variant-numeric: diagonal-fractions; /* 显示½而不是1/2 */ }6. font简写属性的高效写法
font简写可以大幅压缩代码量，但必须注意顺序：
/* 正确顺序 */ .article { font: italic small-caps bold 1.2em/1.5 "Segoe UI", sans-serif; } /* 等价于 */ .article { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 1.2em; line-height: 1.5; font-family: "Segoe UI", sans-serif; }我在框架开发中发现一个性能优化点：使用系统字体栈的简写：
.system-ui { font: caption; /* 使用系统对话框字体 */ } .code-block { font: 12px "Courier New"; /* 仅指定必要属性 */ }7. 字体加载优化策略
网页字体阻塞渲染是个常见问题，我的解决方案是：
@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); font-display: swap; /* 先显示备用字体 */ font-weight: 400; } body { font-family: 'MyFont', fallback-font; }配合资源提示更佳：
<link rel="preload" href="myfont.woff2" as="font" crossorigin>对于关键文本，可以使用CSS Font Loading API：
document.fonts.load('1em MyFont').then(() => { document.documentElement.classList.add('fonts-loaded'); });8. 字体与垂直节奏的配合
保持垂直节奏（Vertical Rhythm）的关键是组合使用font-size和line-height：
:root { --baseline: 24px; } p { font-size: 16px; line-height: calc(var(--baseline) * 1); margin-bottom: var(--baseline); } h2 { font-size: 24px; line-height: calc(var(--baseline) * 2); margin-bottom: var(--baseline); }我在设计系统实践中总结出一个公式：
理想行高 = 字体大小 × 1.618（黄金比例）± 调整值9. 字体特性的高级控制
现代字体支持OpenType特性，可以通过font-feature-settings启用：
.heading { font-feature-settings: "kern" 1, "liga" 1, "swsh" 2; }常用特性代码：
- kern：字距调整
- liga：连字
- dlig：装饰连字
- tnum：表格数字
对于中文排版：
.chinese { font-feature-settings: "locl"; /* 本地化字形 */ text-spacing: ideograph-alpha ideograph-numeric; }10. 字体与颜色的无障碍组合
WCAG 2.1标准要求文本与背景的对比度至少达到4.5:1。我常用的检查工具组合：
.text { color: #333; background-color: #fff; /* 计算对比度：https://contrast-ratio.com */ } @media (prefers-contrast: more) { .text { color: #000; } }对于深色模式：
:root { --text-color: #333; --bg-color: #fff; } @media (prefers-color-scheme: dark) { :root { --text-color: #eee; --bg-color: #222; } }