Font-numeric CSS屬性使用字體支持的替代表單來控制數字的顯示。 1。它可以實現風格上的變化，例如老式或襯里數字，比例或表格間距，分數，序數和斜線零。 2。諸如舊式數字，襯里，表格 - 數字和對角線裂縫之類的值允許精確的印刷控制。 3。這些值可以在單個聲明中合并，以增強設計。 4。并非所有字體都支持每個變體，因此對軸 - 觸發(fā)等工具進行測試或在諸如Google字體之類的平臺上檢查字體描述是必不可少的。 5。實際用途包括在具有表格數字的財務表中對齊列，或改善具有舊式名稱的身體文本的可讀性。 6。通過 @font-face瀏覽器支持和正確的字體功能激活也影響功能。

當您使用CSS中的數字并希望它們看起來更精致（例如它們在專業(yè)設計的書籍或財務報告中）時，您可能會遇到font-variant-numeric 。此屬性使您可以控制數字的顯示方式，從而允許諸如老式圖形或表格間距等風格變化。

這是它的工作原理以及您擁有哪些選項。

font-variant-numeric實際做什么

font-variant-numeric以核心說明了瀏覽器的使用數字（以及相關字符（例如分數或序數指標））要使用的瀏覽器。它不會更改字體本身，而是在當前字體可能支持的不同數字樣式之間切換。

例如，一些字體提供：

• 襯里數字（所有數字位于基線上）
• 老式的數字（像小寫字母一樣，有些數字在基線以下傾斜）
• 比例或表格間距
• 分數和斜線

您可以將多個值結合在一個聲明中，因此：

身體 {
  字體變化數：舊風格 - 數字對角線；
}

共同的價值以及何時使用它們

您可以應用幾個值。這是最有用的細分：

• normal - 使用默認數字樣式。
• oldstyle-nums - 啟用老式數字，其中一些數字延伸到基線以下（非常適合身體文本）。
• lining-nums - 強制所有數字在基線上對齊（適合標題或數據顯示）。
• proportional-nums - 數字占用不同的寬度（如常規(guī)字母），因此“ 1”比“ 8”窄。
• tabular-nums - 所有數字都具有相等的寬度，使數字列整齊（非常適合表或財務報告）。
• diagonal-fractions - 使用傾斜格式而不是堆疊的superscript/subscript表示諸如1/2之類的分數。
• ordinal - 使“ 1st”，“第二”顯示正確顯示的上列序。
• slashed-zero - 顯示零斜線的零，通常用于代碼或數據上下文中以區(qū)分字母O。

這些可以根據您的設計需求進行混合和匹配。

如何確保它有效

并非每個字體都支持所有這些數字變體。如果您沒有看到效果，則可能是因為：

• 當前字體不包括那些特定的數字樣式。
• 瀏覽器不支持正確渲染它們。
• 如果您使用的是Web字體，則該功能不會通過@font-face設置在字體中啟用。

為了檢查字體是否支持這些功能，軸法或OPENTYPE功能測試儀等工具可以提供幫助。此外，許多現代變量字體都清楚地宣傳了它們的支持。

如果您使用的是Google字體，請注意字體描述是否提到Opentype功能還是數字樣式。

實際示例：制作桌子清潔器

假設您正在為財務餐桌設計。您可能希望數字垂直對齊，寬度一致。那就是tabular-nums派上用場的地方。

 TD {
  字體變化數：表格數；
}

這使所有數字都占據了相同的空間，因此列對齊而無需額外的填充黑客。

或者，要在類似書籍的布局中進行良好的觸感，請嘗試：

 p {
  字體變化數：舊風格數字比例數；
}

這種組合使段落中數字的外觀變軟，將它們與周圍文本更好地融合在一起。

這是一個很小的細節(jié)，但是使用font-variant-numeric可以在排版上顯著差異。這不是您每天都需要的東西，但是當您這樣做時，它是一個強大的工具。只需記住測試并確保您的字體支持您要做的事情。

以上是字體變化數如何用于造型數字？的詳細內容。更多信息請關注PHP中文網其他相關文章！