font-variant-numeric: tabular-nums 是启用字体中已有的等宽数字字形（tnum特性）的声明，非生成器；若字体未内置该opentype特性（如sf ui text、roboto默认子集），则完全无效，即使getcomputedstyle返回"tabular-nums"。

font-variant-numeric: tabular-nums 是什么

它不是“开启对齐”的开关，而是告诉浏览器：请用字体中已有的等宽数字（tabular numerals）字形来渲染 0–9。如果字体没打包这个 OpenType 特性（tnum），这行 CSS 就完全无效——你看到的还是比例数字（proportional nums），哪怕样式面板里显示它已生效。

为什么写了却没变化

常见错误现象：font-variant-numeric: tabular-nums 加了，数字宽度依然忽宽忽窄；getComputedStyle(el).fontVariantNumeric 返回 "tabular-nums"，但视觉毫无改变。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 字体本身不支持：SF UI Text、Roboto v20-latin、Microsoft YaHei 默认不含 tnum 特性；iOS 的系统 SF Pro Display 支持，但 SF Pro Text 不一定
• 用了 Web Font 却没加载带数字特性的子集：Google Fonts 链接需加 &text=0123456789 参数才能触发 tnum 字形打包
• 作用对象不对：给 <td> 设置了该属性，但里面混着 <code>¥、%、℃ 等非数字字符——这些不受影响，整体仍歪斜

  怎么写才真正起效

  必须三者同时满足：正确字体 + 正确属性 + 正确结构。

  • 显式声明支持字体：font-family: "SF Mono", "Fira Code", "IBM Plex Mono", monospace;（别依赖系统默认 Georgia，它虽支持但不可控）
  • 属性加在数字容器上：.num { font-variant-numeric: tabular-nums; text-align: right; }，而不是父 <table> <li>混合内容必须拆开：<code><span class="num">123.45</span><span class="unit">¥</span>，单位单独控制宽度或对齐
  • 负号要用 Unicode 减号 −（U+2212），不是短横 -；否则不会随 tabular-nums 对齐

  兼容性与降级怎么做

  Safari ≤15.3 和 Firefox ≤91 会直接忽略 font-variant-numeric，返回 "normal"；@supports 检测不可靠，别信。

  • 保底用 font-family: monospace：所有浏览器都强制等宽，只是字母汉字也被拉平，可读性略差但稳定
  • 渐进增强写法：font-family: "SF Mono", monospace; font-variant-numeric: tabular-nums;
  • 真要验证是否生效？用 JS 实测宽度：el.textContent = "0123456789";，对比纯比例字体下同字符串的宽度波动（需同字号同字体）
  真实业务中最容易被忽略的，是以为“写了属性=搞定对齐”，而没检查字体文件是否真带 tnum 特性——这点在移动端尤为致命，因为系统字体往往阉割了数字变体。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！