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

• font-variant-alternates

• font-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的實現原理了。但要完全掌握這些知識，還是需要一定的時間的。必竟有很多知識點都和字型以及排版相關的。這需要具備一些印刷相關的知識，或許能協助我們更好的掌握這些屬性的特性，以及使用的情境。

另外，目前這些屬性，瀏覽器能支援的為數不多，不過不要緊，感興趣的可以玩玩，體驗一下。或者自己把文章開頭的樣本修改一下下，說不定能達到另外的效果。