使用 OpenType 特性

OpenType 特性類似於字體中的秘密隔間。充分利用這些特性時,就可以找到以微妙且生動的方式讓字體具有不同外觀和行為的方法。並非所有 OpenType 特性都適合隨時使用,但某些特性對於出色的印刷樣式至關重要。

若要在專案中使用字體的 OpenType 特性,您需要將其納入網頁專案中,然後使用所需的 CSS 設定文字樣式。請參閱我們的「語法指南」,以取得每個特性以及可複製並貼到 CSS 中的程式碼的範例。

將 OpenType 特性納入您的專案中

若要將字體的 OpenType 特性納入網頁專案中,請造訪「網頁專案頁面」,然後按一下專案的「編輯」連結。在「字元集」區段中,核取「OpenType 特性」方塊。

核取此方塊後,您將會看到該特定網頁字體系列可用的特性清單,例如連字、替代字元或小寫字母。 

此清單會顯示可供該系列中所有粗細和樣式使用的 OpenType 特性。如果某項特性僅包含在特定的粗細或樣式中,就不會納入此清單中。

檢查瀏覽器是否有支援您正在使用的特性

如果瀏覽器不能好好地支援 font-variant 和 font-feature-settings,則 OpenType 特性可能無法在您所有重要的環境中正常運作。

支援有著令人感到困惑的微妙差異。宣稱支援 OpenType 特性的較新瀏覽器版本有一些值得注意的地方,而不支援 OpenType 特性的舊版瀏覽器可能會導致錯誤。根據預設,Chrome 不會啟用預設應該啟用的特性 (例如通用連字上下文交替)。macOS 和 iOS 上的 Safari 會忽略任何指定的 font-feature-setting 值,改為根據預設選擇啟用一些特性,而且無法修改其預設選擇。某些版本的 Firefox (版本 15 及舊版) 在啟用多個文體集時會發生問題。在 Chrome 32 及舊版中套用 OpenType 特性將停止使用網頁字體

-moz-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
font-feature-settings: "smcp";

目前的瀏覽器支援十分仰賴廠商前置詞。在「CSS 中 OpenType 特性的語法」說明文件中,您會發現程式碼有許多 vendor-prefixed 屬性,如上面範例所示。

搭配 OpenType 特性使用 CSS 來設定文字樣式

用於啟用 OpenType 特性的 CSS 語法仍在進化中。您需要知道的是,既有高層級屬性又有低層級屬性,而且繼承特別棘手。

瀏覽器透過廠商前置詞在某種程度上支援了低層級 CSS font-feature-setting 屬性,但基於兩個原因,使用起來很麻煩。首先,它仰賴很難記住的四個字元的 OpenType 特性標記。其次,所有特性標記都是在單一屬性中指定,這可能會很麻煩。請參閱「特定 OpenType 特性的語法」和「使用多個 OpenType 特性的語法」。

高層級 CSS font-variant 屬性及其子屬性很好用,因為它們會利用自然語言值,例如「small-caps」和「diagonal-fractions」。W3C 希望我們盡可能使用它們,但是瀏覽器並未支援。儘管如此,習慣其語法還是一個很好的做法。

.class {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp";
}

因此,我們將同時使用 font-variantfont-feature-settings,請記住其設計方式。我們會先在 CSS 中指定容易閱讀的字體變體,就像上面的程式碼一樣。

繼承

由於 font-feature-setting 是低層級屬性,適用於「使用它是存取不常使用的特定字體特性的唯一方法的特殊情況」,所以它將覆寫 font-variant,無論原始順序為何。但請小心,它也會覆寫自己:

body {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum";
}

.class {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp"; /* disables onum from body declaration */
}

重新套用 font-feature-settings 屬性時,將會覆寫該屬性的所有繼承的值。在上面範例中,如果具有類別的類別的元素已啟用小寫字母轉為小型大寫字母 (smcp) 和舊式數字 (onum),則需要再次納入「onum」值,所以我們可以重寫宣告,如下所示:

.class {
  font-variant-caps: small-caps;
  font-feature-settings: "onum", "smcp";
}

Indexed font-feature-settings values

部分 font-feature-settings 值稍微複雜一些。到目前為止的範例中,每個值都是一個字串 (或逗號分隔的一組字串)。存在或不存在類似「onum」和「smcp」等特性標記就像一個二進位選擇—開啟或關閉特性。

這言之有理。但如果某種字體包含大寫字母「A」字元的兩個不同花飾字版本,該怎麼辦?在這種情況下,我們不僅要啟用花飾字,而是要啟用花飾字並選擇特定的花飾字。因此,我們可以為該值新增數字索引 (在字串後面):

font-feature-settings: "swsh" 2;

您可能會思考,我應該在這裡使用哪一個數字?字體中有幾種不同的花飾字?這取決於字體。使用「0」表示關閉花飾字特性。使用數字索引的其他特性也是如此,例如文體替代字文體集

使用多個 OpenType 特性

font-variant 屬性是所有 font-variant 子屬性的 CSS 速記。我們可以執行以下操作來啟用通用連字和舊式數字:

.class {
  font-variant: common-ligatures, oldstyle-nums;
}

同樣地,也可以搭配逗號分隔的值清單使用 font-feature-settings 來啟用多項特性:

.class {
  font-feature-settings: "liga", "onum";
}

在這兩種情況下,繼承的值會被完全覆寫,而且瀏覽器支援可能會有所不同。請記住,有時 font-variant 值被設計為一次啟用多項特性 (請參閱「大寫字母轉為小型大寫字母」)。

資源

如果您準備開始使用 CSS 設定樣式,請將我們常用 OpenType 特性的語法詞彙加到書籤中

Adobe 標誌

登入您的帳戶