HTML怎么做老式数字字体_html oldstyle-nums老式数字设置【全网最全】-html教程-PHP中文网

老式数字需css font-variant-numeric: oldstyle-nums 控制，但依赖字体本身支持；中文字体如微软雅黑、思源黑体等几乎均不支持，西文字体如eb garamond、adobe garamond pro等可支持，须配合@font-face加载并设置合理fallback。

html怎么做老式数字字体_html oldstyle-nums老式数字设置【全网最全】

老式数字（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 部署。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

如何安全启用并 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;
}