font-variant: small-caps 没效果，主要是因当前字体不包含小型大写字形，浏览器仅启用而非生成该字形；需选用明确支持的字体（如garamond），或改用font-variant-caps、font-feature-settings:"smcp"等更可靠方式。
font-variant: small-caps 为什么没效果？
直接写 font-variant: small-caps 却看不到小型大写字母，大概率是因为当前字体本身不包含小型大写字母字形（small caps glyphs）。浏览器不会“生成”小型大写，只是启用字体中已有的对应字形。常见系统字体如 Helvetica、Arial、Segoe UI 基本都不带 small caps，所以 CSS 生效但视觉无变化。
实操建议：
- 优先选用明确支持 small caps 的字体，例如
"Garamond"、"Hoefler Text"、"Charter"，或开源字体如"Crimson Pro"、"Libre Baskerville" - 用
@font-face加载时，确认字体文件包含smcp（small capitals）OpenType 特性，且在font-feature-settings中启用 - 临时验证：在支持 OpenType 特性的字体上，加一句
font-feature-settings: "smcp";看是否生效，比单纯依赖font-variant更可靠
font-variant 的现代写法是 font-variant-caps
font-variant 是旧式简写属性，现在更推荐使用细分后的子属性，尤其是 font-variant-caps，它明确控制大小写变体行为，兼容性更好（Chrome 52+、Firefox 34+、Safari 9.1+），语义也更清晰。
常用值及效果：
-
font-variant-caps: small-caps：启用字体内置的小型大写字母（非缩放模拟） -
font-variant-caps: all-small-caps：连小写字母也转为小型大写（比如 “Hello” → 全部小型大写） -
font-variant-caps: petite-caps：启用更小一号的 petite caps（需字体支持） -
font-variant-caps: unicase：首字母大写 + 其余字母用小型大写（较少用）
注意：font-variant-caps 不会改变原始文本内容，只影响渲染；它对数字和标点无影响。
fallback 方案：用 text-transform + font-size 模拟 small-caps
当目标字体确实不支持小型大写，又必须视觉上接近时，可用 CSS 组合模拟，但要注意这不是真正的字形替换，只是近似表现：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.fake-small-caps {
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 0.05em;
}
这个方案的问题很实际：
- 所有字母都被强制转大写，丢失原文大小写语义（SEO 和可访问性受损）
- 字号缩小后，笔画可能过细、易糊，尤其在 Windows 渲染下
- 无法响应
em缩放，行高容易错乱，需额外重设line-height
仅建议用于装饰性标题或内文强调片段，避免用于正文段落或需要语义准确的场景。
OpenType 特性开启：font-feature-settings 最灵活
真正可控的方式是绕过 font-variant-caps，直接调用 OpenType 特性。比如启用小型大写 + 连字 + 分数等，适合排版要求高的项目：
.opentype-enabled {
font-feature-settings: "smcp", "lnum", "frac";
}
关键点：
-
"smcp"启用小型大写字母（small capitals） -
"c2sc"把大写字母转成小型大写（常与"smcp"配合用） - 必须确保加载的字体文件（WOFF2/WOFF）嵌入了对应特性表，否则无效
- 部分浏览器（如旧版 Safari）需加前缀：
-webkit-font-feature-settings
查字体是否支持某特性，可用工具如 Wakamai Fondue 上传字体文件在线检测。
真正难的不是写对那行 CSS，而是确认字体有没有字形、浏览器有没有解析、页面有没有意外覆盖 —— 这三者缺一不可。别只盯着属性名，先看字体本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
