html - 如何访问网页上的 Proxima nova 表格数字？

Question

问题是默认情况下 Proxima Nova 数字不是等宽的。因此一个简单的价目表表不排队。 (见图1)

图 1. 未对齐的数字

问题是:

• 是否有一些 CSS 规则来访问等宽数字？
• 是否有一些 HTML 代码技巧，以便我可以将等宽数字作为字符访问？ (比如 ∑)
• 或者我应该使用 <span class="figure">1</span><span class="figure">2</span> ...？

干杯!

Answer 1

CSS3 Fonts’ font-variant-numeric .这允许您切换 Opentype 功能。在您的情况下，这将是:

.my-element { font-variant-numeric: tabular-nums; }

比邻星新星 lists support for tabular figures这很好，但我不确定浏览器是否支持 font-variant-numeric。如果这不起作用，那么您可以尝试 font-feature-settings相反，它应该给你与 (possibly) more support 相同的效果:

.my-element { font-feature-settings: "tnum" on; }

规范确实说:

Authors should generally use ‘font-variant’ and its related subproperties whenever possible.