css3字體變體font-variation詳解

如果要用一個字來描述的話，可以稱之為字體變體（Font variants），對應的CSS屬性就是font-variation-*屬性，其包括連接（ ligatures）、大寫（caps）、數字（numerals）和替代字形（alternate glyphs）。這些屬性可以讓我們在Web上創造更精準、更漂亮的排版（文字）效果。

事實上，Web上的排版總是要落後於它在它印刷中的效果。但這是可以理解的，因為印在頁面上的字體已經經過幾個世紀的發展，可以說發展到一個複雜的程度。而在瀏覽器要達到這樣的一個層次，還是很難的。

但是，由於Web字體中OpenType功有的增加，以及CSS特性的完善與能力的提高，Web上排版和印刷上排版之間的差距在逐漸拉小。

那麼今天這篇文章，借助前面的範例，我們來看看如何使用CSS控制OpenType特性，但請記住，你所使用的任何Web字體需要支援這些特性。

font-variant-*屬性

在CSS中可以透過font-variant-*屬性來控制大多數OpenType特性。也可以使用font-feature-settings用來支援低版瀏覽器。然而，只要可能，你應該使用更現代的font-variant-*屬性。在實際使用的時候，可以使用@supports規則來對font-variant-*做降級處理，對於支援的瀏覽器使用該屬性，不支援的瀏覽器使用font-feature-settings。

body {    font-feature-settings: "liga" 1;}@supports (font-variant-ligatures: common-ligatures) {    body {        font-feature-settings: normal;        font-variant-ligatures: common-ligatures;    }}

可能到現在為止，你和我一樣，都還不太明白上面的程式碼究竟起了什麼作用。別擔心，繼續往後閱讀，你會整明白的。

font-variant-*主要包含：

• #font-variant-ligatures

font-variant-caps

#font-variant-numeric

#1font-variant-alternatesfont-variant-east-asian

##後面的內容簡單的來看看這些屬性。

font-variant-ligatures連接是由兩個或兩個以上的字答案組成的單一字形。它們通常能防止難看或尷尬的字母碰撞。主要是功能是有助於辨認

。 #########font-variant-ligatures###可以用下列關鍵字做為其屬性值：###

/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
font-variant-ligatures: contextual;                 /* <no-historical-ligatures> <common-ligatures> */

/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;

######common-ligatures##########這些連接是設計者決定在正常情況下使用的連接。在大多數情況下，應該使用這些，因為大數瀏覽器都預設為啟用它們。 ######最常見的連接值是###fi###、###ffi###、###th###或類似的。它們對應的OpenType值為###liga###和###clig###。兩個值都是有可能的：###############common-ligatures###：啟動連接##############no- common-ligatures###：停用連接############例如：###

font-variant-ligatures: common-ligatures; /* 开启 */font-variant-ligatures: no-common-ligatures; /* 禁用 */font-feature-settings: 'liga' 1; /* 低版本浏览器 开启 */font-feature-settings: 'liga' 0; /* 低版本浏览器 禁用 */

###效果如下：#########上一行開啟連接，下一行停用連接的效果############discretionary-ligatures#########這些可以用於印刷方面的連接，可以達到特殊效果。這些預設是禁用的。也可以理解為，這些值可以用來控制特定的連接，指定的字體並由OpenType設計器來定義。它們對應的是OpenType值###dig###。它也有兩個可能的值：###############discretionary-ligatures###：啟動連接##############no-discretionary -ligatures###：停用連線############如果你的程式碼中設定了：###

font-variant-ligatures: discretionary-ligatures; /* 激活 */font-variant-ligatures: no-discretionary-ligatures; /* 禁用 */font-feature-settings: 'dlig' 1; /* 低版本浏览器 激活 */font-feature-settings: 'dlig' 0; /* 低版本浏览器 禁用 */

###效果如下：#########第一行開啟連接，第二行停用連接############contextual#########這些值控製字母是否適應它們的上下文。也就是說，它們是否適應周圍的字母。這些值對應於OpenType中的###calt###。同樣的###contextual###表示啟用；###no-contextual###表示停用。 ###

font-variant-ligatures: contextual; /* enable */font-variant-ligatures: no-contextual; /* disable */font-feature-settings: 'calt' 1; /* low-level enable */font-feature-settings: 'calt' 0; /* low-level disable */historical-ligatures

###使用這些值，看起來就像德文中的###tz###顯示成###ß###。它對應的OpenType值是###hlig###。 ###historical-ligatures###環開啟，而###no-historical-ligatures###禁用。 ###

font-variant-ligatures: historical-ligatures; /* enable */font-variant-ligatures: no-historical-ligatures; /* disable */font-feature-settings: 'hlig' 1; /* low-level enable */font-feature-settings: 'hlig' 0; /* low-level disable */

######font-variant-position#########我們經常使用了###sub###和###sup###元素的來改為字元在垂直方向的位置。預設情況下，瀏覽器會使用一個常規的數字字符，使###font-size###更小，並使用###vertical-align###來提高或降低它。這些都不是真正的###sub###和###sup###，而且通常會顯得很難看，更不用說它們會打亂###line-height###。 ######值得慶幸的是，現在有一種方法可以使用###font-variant-position###真正實現###sub###和###sup###這樣的效果。不過目前該屬性只在Firefox中得到支援。 ###

/* Keyword values */font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;/* Global values */font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: unset;

sub

实现类似于<sub>标签的下标字符效果：

font-variant-position: sub; /* enable */font-variant-position: normal; /* disable both variants */font-feature-settings: 'subs' 1; /* low-level enable */font-feature-settings: 'subs' 0; /* low-level disable */

super

实现类似于<sup>标签的上标字符效果：

font-variant-position: super; /* enable */font-variant-position: normal; /* disable both variants */font-feature-settings: 'sups' 1; /* low-level enable */font-feature-settings: 'sups' 0; /* low-level disable */

font-variant-caps

font-variant-caps属性用来控制字母大写。只不过这里启用的是小型大写。

/* Keyword values */font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;/* Global values */font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;

small-caps

小型大写字母的设计与小写字母相同，用于在运行文本中大写字母。它们使段落更具内聚力和可读性。

font-variant-caps: small-caps; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: 'smcp' 1; /* low-level enable */font-feature-settings: 'smcp' 0; /* low-level disable */

all-small-caps

small-caps只是替换了小写字母为大写字母。要是想将所有字母都变成小的大写字母，需要使用all-small-caps。

font-variant-caps: all-small-caps; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: 'smcp' 1, 'c2sc' 1; /* low-level enable */font-feature-settings: 'smcp' 1, 'c2sc' 0; /* low-level disable */

petite-caps

标准的小型大写字母通常会比字体的x高度略大一些。一些字体有额外的小型大写，与x高度匹配。这些被称为petite-caps。

font-variant-caps: petite-caps; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: 'pcap' 1; /* low-level enable */font-feature-settings: 'pcap' 0; /* low-level disable */

all-petite-caps

与all-small-caps类似，它将所有字母包括小写字母和大写字母，都转换成小型大写字母，而且和字体的x字母高度相匹配。

font-variant-caps: all-petite-caps; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: 'pcap' 1, 'c2pc' 1; /* low-level enable */font-feature-settings: 'pcap' 1, 'c2pc' 0; /* low-level disable */

unicase

该功能将大写和小写字母映射到混合的小写字母和小写的大型字母，创建一个单一case的字母表。有时这些小写字母是实际的小型大写字母，有时它们是特别设计的unicase形式。这个特性的实现从字体到字体各不相同。

font-variant-caps: unicase; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: 'unic' 1; /* low-level enable */font-feature-settings: 'unic' 0; /* low-level disable */

titling-caps

标准的大写字母设计是用来与小写字母一起使用的，当它们被用在所有大写字母的字符串时，它们会显得过于大一点。有些字体还特别适合这种情况。

font-variant-caps: titling-caps; /* enable */font-variant-caps: normal; /* disable all variants */font-feature-settings: 'titl' 1; /* low-level enable */font-feature-settings: 'titl' 0; /* low-level disable */

font-variant-numeric

font-variant-numeric属性用来控制对数字、分数和序号标记的处理。数字的正确显示取决于上下文的不同，以下是一些一般性的规则：

• 运行于文本正文中的数字，使用比例的是旧式数字

• 运行在标题中的数字，使用的比例是内联数字

• 在数字表格中的数字，使用的比例是表格内联数字

常用的属性：

font-variant-numeric: normal;font-variant-numeric: ordinal;font-variant-numeric: slashed-zero;font-variant-numeric: lining-nums;         /* <numeric-figure-values> */font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */font-variant-numeric: oldstyle-nums stacked-fractions;/* Global values */font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: unset;

lining-nums

lining-nums里的数字近似大写字母，高度一致。它们应该用于标题或表格中的数字。通常情况下，数字是默认的。

font-variant-numeric: lining-nums; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: 'lnum' 1; /* low-level enable */font-feature-settings: 'lnum' 0; /* low-level disable */

oldstyle-nums

旧式数字（Old-style）有不同的高度和对齐方式，因此更类似于小写字母。它们应该用于正文文本中。

font-variant-numeric: oldstyle-nums; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: 'onum' 1; /* low-level enable */font-feature-settings: 'onum' 0; /* low-level disable */

proportional-nums

比例（Proportional）数字具有可变的间距，并与水平文本相融合。它们应该在大多数情况下使用，除了数据表格中。其中垂直对齐很重要。通常数字在默认情况下是比例数字。

font-variant-numeric: proportional-nums; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: 'pnum' 1; /* low-level enable */font-feature-settings: 'pnum' 0; /* low-level disable */

tabular-nums

表格数字具有相同的宽度，应该在数据表格中使用，以允许数字垂直对齐。

font-variant-numeric: tabular-nums; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: 'tnum' 1; /* low-level enable */font-feature-settings: 'tnum' 0; /* low-level disable */

diagonal-fractions

默认情况下，分数将以小写字母的形式显示。适当的分数将被格式化，以匹配一个衬里图形的高度，可以是对象线或堆叠。

font-variant-numeric: diagonal-fractions; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: 'frac' 1; /* low-level enable */font-feature-settings: 'frac' 0; /* low-level disable */

stacked-fractions

在大多数Web字体中，堆叠分数并不像对角线分数那样普遍，但它应该被证明是有用的。这在大量的科学或数学中用得多。

font-variant-numeric: stacked-fractions; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: 'afrc' 1; /* low-level enable */font-feature-settings: 'afrc' 0; /* low-level disable */

ordinal

Ordinal像st、nd、rd和th这样的序号默认显示为标准小写字母。然而，理想情况下，这些数字会随着数字的增加而增加。序数值支持这一点。

font-variant-numeric: ordinal; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: 'ordn' 1; /* low-level enable */font-feature-settings: 'ordn' 0; /* low-level disable */

slashed-zero

可以使用斜线来替换零字符。

font-variant-numeric: slashed-zero; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: 'zero' 1; /* low-level enable */font-feature-settings: 'zero' 0; /* low-level disable */

font-variant-alternates

字体可以为任何字符提供多种替换。font-variant-alternates属性提供了许多控制字符替换的方法。

/* Keyword values */font-variant-alternates: normal;
font-variant-alternates: historical-forms;/* Functional notation values */font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);/* Global values */font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;

historical-forms

被运用于周期表。请注意这与连接中的效果还是有不同之处。

font-variant-numeric: historical-forms; /* enable */font-variant-numeric: normal; /* disable all variants */font-feature-settings: 'hist' 1; /* low-level enable */font-feature-settings: 'hist' 0; /* low-level disable */

除此之外，根据不同的场景选择不同的属性值。

font-variation-settings

font-variation-settings属性主要用于指定需要更改的特性，其主要有由个字母和它们的变化值组成。该属性提供了对OpenType或TrueType字体变体的在低浏览器的控制。

/* Use the default settings */font-variation-settings: normal;/* Set values for OpenType axis names */font-variation-settings: "XHGT" 0.7;/* Global values */font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: unset;

这就是在我们文章的开头的示例中看到的font-variation-settings: 'INLN' 0;和font-variation-settings: 'INLN' 1000, 'SWRM' 1000;等。每个值都有4个ASCII字符和一个表示axis值的数字组成。如果<string>有更多或更少的字符或包含U+20至U+7E的codepoint范围之外的字符，那么整个属性都是无效的。而<number>可以是分数，也可以是负数。

总结

撸了一圈font-variation-*相关的属性，总算是了解了这个Demo的实现原理了。但要完全掌握这些知识，还是需要一定的时间的。必竟有很多知识点都和字体以及排版相关的。这需要具备一些印刷相关的知识，或许能帮助我们更好的掌握这些属性的特性，以及使用的场景。

另外，目前这些属性，浏览器能支持的为数不多，不过不要紧，感兴趣的可以玩玩，体验一下。或者自己把文章开头的示例修改一下下，说不定能达到另外的效果。

相关推荐：

CSS3 font-feature-settings特性减除字体动画震颤效果实例分享

javascript字体颜色控件的开发

CSS的文本字体颜色如何设置

以上是css3字體變體font-variation詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！