如何访问网页上的proxima nova表格图形？

问题是，默认情况下，Proxima Nova数字不是等宽的。因此，一个简单的价格表不排队。（见图1）如何访问网页上的proxima nova表格图形？

Misaligned numbers 图1.不对齐的数字

的问题是：

有一些CSS规则来访问等宽的数字？
有一些HTML代码技巧，所以我可以访问等宽字符作为字符？（像∑）
或应该使用12 ...？

干杯！

2014-10-06 Barnabas Szabolcs

CSS3 Fonts’ font-variant-numeric。这使您可以切换Opentype功能。在你的情况，这将是：

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

比邻新星lists support for tabular figures所以这是很好的，但我不知道的字体变数字浏览器的支持。如果不工作，那么你可以尝试font-feature-settings而是应该给你同样的效果与(possibly) more support：

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

的规范并说虽然是：

作者通常应该使用“字体变'及其相关的子属性。

来源

2014-10-06 08:47:41

Hi Robin，感谢您试图帮助+1。你能否请添加一个链接到规范？（-webkit-font-feature-settings似乎不能正常工作，字体变体数字似乎并不存在于Chrome上。） – 2014-10-06 08:53:49

'font-feature-settings'应该在IE（无前缀）/ Firefox（' -moz-'直到下一个版本）/ Chrome（'-webkit-'），但在Safari中不支持。我找不到'font-variant-numeric'支持的任何资源，可能会猜测它尚未在浏览器中实现。至于Opentype的功能，我不知道你是如何为Proxima Nova服务的，但它可能对表格数字的支持被剥夺了。有关于此的更多信息？ – 2014-10-06 09:18:20

我找到了解决方案。该CSS是

.tabular-numbers { 
    -moz-font-feature-settings:"tnum" 1; /* Firefox 31+ */ 
    -moz-font-feature-settings:"tnum=1"; 
    -webkit-font-feature-settings: 'tnum' 1; /* Chrome 31+, Android 4.4+, Opera 24+ */ 
    font-feature-settings: 'tnum' 1; /* IE10+ */ 
}

参考文献：http://clagnut.com/sandbox/css3/和http://caniuse.com/#feat=font-feature

相反的答案：No support for font-feature-settings in Safari?，我已经在Mac上的Safari 7.1见过不支持。

因此，唯一的普遍工作方案目前已经：

.tabular-figure { 
    display: inline-block; 
    width: 7px; 
    text-align: center; 
}

和5671

这是废话，所以更喜欢

.number{ 
    font-family: "Helvetica Neue"; 
} 
<span class="number">5671</span>

看起来像苹果的Safari浏览器正在成为新的互联网资源管理器...：@@@

来源

2014-10-06 09:25:20

如何访问网页上的proxima nova表格图形？

回答

相关问题