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/iOSSegoe UI适配WindowsRoboto适配AndroidOxygen和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 Fontsfont-weight的数值可以更精细.variable-font { font-family: Inter var, sans-serif; font-weight: 387; /* 精确到个位数 */ }3. 字体样式font-style的创造性应用除了常见的italic和normalfont-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 relpreload hrefmyfont.woff2 asfont crossorigin对于关键文本可以使用CSS Font Loading APIdocument.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; } }