CSS font-variant 属性

介绍

CSS font-variant 属性用于设置字体的变体，默认值为 normal。字体变体通常有小型大写字母，全大写或小型数字等。此属性只支持英文字体，不支持汉字等其他字符。

取值

• normal：只有正常的字母形式。默认值。
• small-caps：字母都在小写字母基线上，字母高度是大写字母的一半。
• all-small-caps：所有字母都以小写字母形式呈现，但大小写字母等比缩放，所以大写字母比小写字母大约两倍。
• petite-caps：所有字母都在小写字母基线上，但大小写字母等比缩放，所以大写字母比小写字母大约两倍。
• all-petite-caps：所有字母都以小写字母形式呈现，大小写字母等比缩放，所以大写字母比小写字母大约两倍。
• unicase：小写字母采用大写字母的形式，但是字母高度却和小写字母相同。
• titling-caps：所有字母均以大写字母形式呈现，并会等比缩放。

代码实现

可以通过以下代码实现字体变体效果：

h1 {
  font-variant: small-caps;
}

浏览器兼容性

此属性在不同浏览器中的兼容性具有差异。针对以复杂的字体变体，默认的 normal 并不产生任何效果。而浏览器中的显示效果会因字体的不同而不同。在 Chrome 和 Firefox 中，“small-caps” ”的效果几乎一致，但在 Edge 中就有明显的差异。有几个变体，在 Internet Explorer 中根本没有效果。

注意事项

• 字体变体是契合当地语言习惯的。
• 字体变体不是用来格式化文章的。它们应该用在标题、公告语、名称、缩写等上。
• 严格来说，只有正品字体才会提供这些字体变体选项。这意味着无法保证每个字体都提供每个字体变体，因此不同的字体会导致不同的显示效果。
• 如果必须要容纳出现在字体中的所有字符，考虑使用 Unicode Normalization，以适应所有字符并确保显示一致性。