font-variant-caps: small-caps 生效需字体真实支持smcp/c2sc特性，否则浏览器模拟导致字形变细、间距失衡；常见失效原因包括文本全小写、系统字体不支持、混入中文数字及text-transform: uppercase干扰；验证需结合devtools计算值与渲染效果，落地须搭配@font-face加载可靠字体、合理字体栈、font-feature-settings双保险及@supports检测。
font-variant-caps: small-caps 能生效，但几乎总要配合字体本身支持，否则只是浏览器强行缩放大写字母——字变细、间距发散、视觉失衡。
为什么设置了 font-variant-caps: small-caps 却没变化
最常见原因不是 CSS 写错了，而是文本或字体不匹配：
- 输入全是小写字母（如
"hello world"）：多数浏览器只对原始大写字母（A–Z）触发替换；小写字母是否转成小型大写，取决于字体是否提供c2sc（lowercase → small caps）OpenType 特性 - 用了系统默认字体（如
system-ui、Segoe UI、Helvetica）：它们普遍不带真实smcp或c2sc字形，浏览器 fallback 为“模拟小型大写”，即把大写字母等比缩小到约 80%，基线不变，结果笔画发虚、字距撑开 - 混入了中文、数字或标点：这些字符完全不受
font-variant-caps影响，原样渲染，容易造成视觉割裂 - 写了
text-transform: uppercase在前：全大写后，small-caps就没了操作对象——它只作用于小写字母或原本就大写的字母，不处理已转换的大写
怎么验证字体是否真支持 small-caps
不能只看 CSS 是否被解析，得看渲染结果是否“矮而实”：
- 打开 DevTools → Elements → Computed → 找
font-variant-caps，确认计算值是small-caps - 再看实际文字：如果 “The quick brown fox” 中的
quick变成了统一高度、粗细协调的矮体大写字母（≈ x-height），说明字体有真smcp支持；如果只是QUICK缩小了一圈、笔画明显变细，就是模拟效果 - 用
font-feature-settings: "smcp"替代测试：加引号、强制启用 OpenType 特性。如果效果不同（比如小写字母也变了），说明原字体确实缺c2sc，font-variant-caps的行为受限 - 查字体文档：明确标注支持
smcp和c2sc的字体才可靠，例如Source Serif Pro、IBM Plex Serif、Garamond、Crimson Text
如何稳妥落地 font-variant-caps: small-caps
单靠一条 CSS 规则无法保证效果，必须组合动作：
- 用
@font-face加载已知支持的 Web 字体，并在src中确保包含含smcp/c2sc的字体文件（WOFF2 最佳） - 字体栈里把支持字体放最前：
font-family: "Source Serif Pro", "Crimson Text", serif;—— 别依赖serif或system-ui - 加双保险：
font-variant-caps: small-caps; font-feature-settings: "smcp", "c2sc";（注意引号和逗号） - 用
@supports (font-variant-caps: small-caps)包裹规则，避免旧浏览器加载无效样式 - 降级策略不是
text-transform: uppercase，而是保留原文本——强行转大写会破坏人名缩写（如McDonald→MCDONALD）或技术术语语义
真正麻烦的不是写对 CSS，而是让字体、内容、浏览器三者对齐。哪怕所有条件都满足，iOS Safari 11–12 对某些字体特性的识别仍有抖动，必须实机验证。别跳过这步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
