font-variant: small-caps 仅对 ASCII 小写字母（a–z）触发真实小型大写渲染，大写字母、数字、标点及非拉丁字符均不变；效果依赖字体是否内置 smcp 特性，否则浏览器模拟缩放小写，失真明显。
font-variant: small-caps 只对小写字母生效，大写字母保持原样
直接设置 font-variant: small-caps 后，浏览器会把文本中的小写字母（a–z）渲染为“小型大写”（small capitals）——即字形与大写字母相同但尺寸略小（通常约80%–85%的大写字母高度），而原本就是大写的字母（A–Z）、数字、标点、空格等完全不变。这不是“转换大小写”，而是字体渲染行为，依赖字体本身是否提供小型大写字形。
常见错误是以为它能自动把小写转成视觉上的大写效果，结果发现 hello WORLD 渲染出来是 HELLO WORLD（前半段仍是普通小写尺寸，后半段才是正常大写），实际效果却是 HELLO WORLD（前半段是小型大写，后半段是原始大写）——因为 WORLD 本来就是大写，不参与小型大写渲染。
- 必须使用支持
small-caps的字体（如系统自带的Georgia、Times New Roman，或 Google Fonts 中明确标注支持 OpenTypesmcp特性的字体，例如IBM Plex Serif） - Web 字体需在
@font-face中启用font-feature-settings: "smcp"或通过font-variant: small-caps触发（现代浏览器自动映射） - 若字体不支持，浏览器会“模拟”小型大写：把小写字母按比例缩小并提升 baseline，但字形仍是普通小写，显得单薄、失真
如何确认字体是否真正支持小型大写
最可靠的方式是用 font-feature-settings 显式开启 OpenType 特性，并观察渲染差异：
.test {
font-family: "Source Serif Pro", serif;
font-feature-settings: "smcp";
/* 而不是只靠 font-variant: small-caps */
}
如果 font-feature-settings: "smcp" 生效且文字变紧凑、笔画更厚重，说明字体内置了真实小型大写字形；如果和 font-variant: small-caps 效果一致甚至无变化，大概率是模拟渲染。
- Chrome DevTools 的 Elements 面板 → Computed → 检查
font-variant-caps是否为small-caps，再看font-feature-settings是否被应用 - 用字体工具（如 FontDrop.info）上传字体文件，搜索是否包含
smcp（small capitals）或c2sc（caps to small caps）特性 - CSS 中可同时写
font-variant: small-caps; font-feature-settings: "smcp";，后者优先级更高，且兼容性更好（尤其 Safari）
font-variant: small-caps 在不同语言/字符集下的表现
它只作用于 ASCII 小写字母（U+0061–U+007A）。对带重音的拉丁字母（如 é、ñ）、西里尔字母（а、б）、汉字、emoji 等完全无效——这些字符既不会变成小型大写，也不会被忽略或报错，只是原样显示。
- 若内容含国际化文本（如法语、西班牙语），建议先用 JavaScript 做预处理（仅对 ASCII 小写应用样式），或改用
text-transform: uppercase+ 自定义字号控制（虽非真正小型大写，但可控） - 某些字体（如
Charis SIL）支持多语言小型大写，但需显式启用font-feature-settings: "smcp" "c2sc" - 中文排版中慎用：中文字体无“小型大写”概念，
font-variant: small-caps对汉字无任何影响，但可能意外触发字体回退
替代方案：当 font-variant 不可用或效果差时
如果目标字体不支持小型大写，或需要精确控制尺寸/行高，可用组合 CSS 模拟近似效果：
.fake-small-caps {
text-transform: uppercase;
font-size: 0.85em;
letter-spacing: 0.05em;
/* 手动微调 baseline，避免下沉 */
position: relative;
top: -0.05em;
}
注意这不是真正的 OpenType 小型大写——字形仍是普通大写字母缩放而来，缺少专有字重与比例优化，长时间阅读易疲劳。仅适用于标题、短标签等非正文场景。
- 不要对整段正文使用模拟方案，可读性下降明显
- 避免嵌套：父元素设
font-variant: small-caps，子元素再设text-transform: none无法恢复原小写，因font-variant是渲染层行为，不是文本内容变换 - 服务端渲染（SSR）或静态站点中，若字体加载延迟，可能出现先显示模拟效果、再跳变为真实小型大写的情况，建议配合
@font-face的font-display: optional或 JS 加载检测
真正的小型大写依赖字体设计本身，CSS 只是开关。很多所谓“支持 small-caps”的 Web 字体其实只是提供了模拟 fallback，这点在设计系统或品牌规范中容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
