font-feature-settings对表格数字对齐有效，是因为它直接启用字体的"tnum"（tabular numbers）opentype特性，强制所有数字等宽显示，配合text-align:right实现真正右对齐，但依赖字体本身是否打包该特性。
为什么 font-feature-settings 对表格数字对齐有效
普通字体中，数字默认是比例宽度（如 1 窄、0 宽），导致表格里数值列左右晃动、难以对齐。开启等宽数字（tabular figures）后，所有数字占相同水平空间，配合 text-align: right 就能真正右对齐——这不是靠加空格或固定宽度硬凑的，而是字体本身的排版特性。
关键点：该特性依赖字体支持。主流系统字体中，system-ui、Segoe UI、Helvetica Neue、Menlo、Consolas 多数支持 "tnum"；但 Helvetica（旧版 macOS）、Arial 不支持，会静默失效。
怎么写 CSS 才让表格数字真正等宽
直接在 <td> 或数字类容器上设置，避免污染全局字体：<pre class="brush:php;toolbar:false;">td.number,
.num {
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums; /* 推荐同时声明，更语义化 */
text-align: right;
}</pre>
<p>注意两点：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>
<code>font-feature-settings: "tnum" 是底层控制，兼容性略好于 font-variant-numeric，但后者更易读、不易拼错
text-align: right 才显效果；单纯等宽不设对齐，视觉上仍“不对齐”font-feature-settings: "tnum" on —— on 是旧语法，现代浏览器已弃用，写了反而可能失效Chrome/Firefox/Safari 表现差异与验证方法
各浏览器解析一致，但渲染结果取决于字体是否真提供 tnum 特性。常见问题：
- Safari 在某些网页字体（如自托管的 Inter）上需额外声明
font-feature-settings: "tnum" 1才生效（数值 1 表示启用） - Firefox 对
font-variant-numeric支持最稳，可优先用它；若需兼容极老 Chrome（font-feature-settings - 验证是否生效：打开 DevTools → Elements 面板 → 查看 computed 样式里
font-feature-settings是否为"tnum"，再对比111和000在单元格内占据的像素宽度是否相等
别忽略字体加载失败时的降级策略
如果用了 Web Font（如 @font-face 引入的 Roboto），而字体文件没加载或不带 tnum 特性，等宽数字就完全失效。稳妥做法：
- 在
font-family列表末尾保留一个已知支持的系统字体，例如：font-family: "Roboto", "Segoe UI", system-ui; - 避免只依赖单一 Web Font 的
tnum，尤其当该字体由第三方 CDN 提供且未确认其 OpenType 特性完整性时 - 对金融、统计类关键表格，可加一层 JS 检测（如创建两个
span分别放0和1，测 width 差值），但多数场景没必要
等宽数字不是“开了就完事”，它卡在字体、CSS 声明、浏览器解析三者的交界上，少一个环节，表格里的数字就还是歪的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
