老式数字需CSS font-variant-numeric: oldstyle-nums 控制，但依赖字体本身支持；中文字体如微软雅黑、思源黑体等几乎均不支持，西文字体如EB Garamond、Adobe Garamond Pro等可支持，须配合@font-face加载并设置合理fallback。
老式数字（oldstyle figures）不是靠 HTML 标签或属性直接启用的，必须通过 CSS 的 font-variant-numeric 控制，且依赖字体本身是否包含该字形——绝大多数系统默认中文字体（如“微软雅黑”“苹方”“思源黑体”）根本不支持 oldstyle nums，强行设置无效。
font-variant-numeric: oldstyle-nums 为什么没反应
常见错误现象：font-variant-numeric: oldstyle-nums; 写了但数字还是直上直下的“lining figures”（现代数字），页面毫无变化。
原因很实在：
- 你用的字体压根没内置 oldstyle 字形，比如
"Microsoft YaHei"、"SimSun"、"Helvetica Neue"（非 Pro 版）都不支持 - 浏览器不支持该属性（IE 完全不支持，Edge 12+、Chrome 48+、Firefox 34+ 才支持）
- CSS 优先级被覆盖，比如父元素写了
font-variant-numeric: lining-nums;，子元素没显式重置 - 用了简写
font属性却漏掉了font-variant-numeric，它不会继承，也不会被连写自动带上
哪些字体真正支持 oldstyle-nums
能用的老式数字字体极少，且基本是西文字体。中文字体几乎全军覆没——这不是配置问题，是字体设计缺失。
立即学习“前端免费学习笔记（深入）”；
实测可用的字体（需确保已加载）：
-
"FF Scala"、"FF Scala Sans"（商业字体，需授权） -
"Adobe Garamond Pro"、"Minion Pro"（带 Pro 后缀的 Adobe 字体） - Google Fonts 中明确标注支持的：例如
"Cormorant Garamond"（在 Google Fonts 页面点开“Specimen”，切换到 “Numbers” 栏能看到 oldstyle 对比） - 开源可选：
"EB Garamond"（GitHub 可下载 .woff2，配合@font-face引入）
注意："Georgia"、"Times New Roman" 在 Windows 下通常只提供 lining nums；macOS 系统自带的 "Hoefler Text" 支持，但无法 Web 部署。
如何安全启用并 fallback
不能假设用户装了某字体，也不能指望所有浏览器一致渲染。必须带降级和检测意识：
- 用
@font-face显式加载含 oldstyle 字形的字体，并在src中指定format("woff2")和unicode-range（可选，提升加载效率） - 在使用处写全：
font-variant-numeric: oldstyle-nums;，不要省略单位或值 - 必须配兜底字体族：比如
font-family: "EB Garamond", Georgia, serif;，否则 fallback 到Georgia时 oldstyle 会消失 - 对纯数字内容（如价格、年份），建议加 class 单独控制，避免影响正文段落排版节奏
示例片段：
@font-face {
font-family: "EB Garamond";
src: url("fonts/eb-garamond-latin.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
.price-num {
font-family: "EB Garamond", Georgia, serif;
font-variant-numeric: oldstyle-nums;
}
替代方案：不用 oldstyle-nums 也能模拟质感
如果项目不允许引入额外字体，或必须兼容旧浏览器，别硬扛。老式数字本质是为印刷排版服务的视觉节奏优化，在网页中收益有限，反而容易引发兼容性雪球。
更务实的做法：
- 用
font-variant-numeric: tabular-nums;统一等宽数字，提升表格/价格对齐可读性（支持度更高） - 对关键数字（如年报、品牌 slogan），用 SVG 或图片替代——可控、保真、无字体依赖
- 接受 lining nums 为主流，仅在高端品牌站、PDF 导出场景才强求 oldstyle
最常被忽略的一点：即使字体和 CSS 都对了，Safari 在某些字号下仍会回退到 lining nums，这是 WebKit 渲染层的已知限制，没有绕过办法——得靠视觉验收时真机检查，不能只信开发工具预览。
