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

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

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

font-variant-numeric實際做什麼

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

例如，一些字體提供：

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

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

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

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

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

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

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

如何確保它有效

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

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

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

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

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

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

 TD {
  字體變化數(shù)：表格數(shù)；
}

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

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

 p {
  字體變化數(shù)：舊風格數(shù)字比例數(shù)；
}

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

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

以上是字體變化數(shù)如何用於造型數(shù)字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！