如何訪問網頁上的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表格圖形？

回答

相關問題