使用手冊取消

CSS 中 OpenType 特性的語法

搜尋

上次更新時間 2021年4月29日

我們將在此頁面上詳細說明各項 OpenType 特性，並提供每項特性的專屬範例。如需有關如何在網頁專案中啟用 OpenType 特性以及如何在 CSS 中使用這些特性的更廣泛概觀資訊，請參閱我們的說明文件：「在 CSS 中使用 OpenType 特性」。

連字

字母

數字

文體集

文體集 01–20 (ss##)

東亞文字

寬度變化

文化變體

垂直特性

通用/標準連字 (liga)

連字的實際操作範例，在 Warnock Pro 中設定。

此特性會以單一字符 (稱為連字) 取代一連串的字符，這是印刷用途所偏好的做法。當啟用此特性時，它會插入設計師/製造商判斷在正常情況下應該使用的連字。

連字特性預設情況下已啟用，這表示您不必撰寫任何 CSS 應該就可以使用此特性，但是 Chrome 預設未啟用此特性。此外，此特性無法在 Safari (Mac 或 iOS) 中停用。還有某些版本的 Chrome 和 Firefox 無法處理包含空格的連字。

.class {
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

若要使用 font-variant 屬性或 font-variant-ligatures 子屬性啟用此特性，請使用 common-ligatures 值，此值會啟用通用和上下文連字。就像上下文交替一樣，上下文連字有內建條件式邏輯，只會在特定情況下套用替換字符。若要使用 font-feature-settings 獲得相同的效果，請使用「liga」和「clig」特性標記。也請參閱：「使用多個 OpenType 特性的語法」。

.class {
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
  font-feature-settings: "liga" 0, "clig" 0;
}

若要停用此特性，請針對 font-feature-settings 使用 no-common-ligatures 值和零的數字索引。

上下文交替 (calt)

上下文交替實際運作的範例，在 Caflisch Script Pro 中設定。

在指定的情況下，此特性會使用可提供更有效連接行為的替代形式來取代預設字符。就像連字一樣 (雖然不是嚴格的連字特性)，上下文交替通常用於讓字符的形狀與周圍的上下文協調一致。

上下文交替特性預設情況下已啟用，這表示您不必撰寫任何 CSS 應該就可以使用此特性，但是 Chrome 預設未啟用此特性。此外，此特性無法在 Safari (Mac 或 iOS) 中停用。

.class {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

若要透過 font-variant 屬性或 font-variant-ligatures 子屬性啟用它，請使用 contextual 值。若要使用 font-feature-settings 獲得相同的效果，請使用「calt」特性標記。

.class {
    font-variant-ligatures: no-contextual;
    -moz-font-feature-settings: "calt" 0;
    -webkit-font-feature-settings: "calt" 0;
    font-feature-settings: "calt" 0;
}

若要停用此特性，請針對 font-feature-settings 使用 no-contextual 值和零的數字索引。

選擇性連字 (dlig)

選擇性連字的實際操作範例，在 Warnock Pro 中設定。

此特性會以單一字符 (連字) 取代一連串的字符，這是印刷用途所偏好的做法。當啟用此特性後，它會插入可用於特殊效果的這些連字。

.class {
  font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "dlig";
  -webkit-font-feature-settings: "dlig";
  font-feature-settings: "dlig";
}

選擇性連字特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-ligatures 子屬性啟用它，請使用 discretionary-ligatures 值。若要使用 font-feature-settings 獲得相同的效果，請使用「dlig」特性標記。

小寫字母轉為小型大寫字母 (smcp)

小寫字母轉為小型大寫字母的實際操作範例，在 Warnock Pro 中設定。

此特性會將小寫字元轉為小型大寫字母。

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

小寫字母轉為小型大寫字母特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-caps 子屬性啟用它，請使用 small-caps 值。若要使用 font-feature-settings 獲得相同的效果，請使用「smcp」特性標記。

請注意，在某些字體中，小寫字母轉為小型大寫字母特性可能還包括其他形式。根據 OpenType 規範，smcp OpenType 特性「可能包括與小型大寫字母相關的形式，例如舊式數字」。

大寫字母轉為小型大寫字母 (c2sc)

大寫字母轉為小型大寫字母的實際操作範例，在 Warnock Pro 中設定。

此特性會將大寫字元轉為小型大寫字母。

.class {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}

大寫字母轉為小型大寫字母特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-caps 子屬性啟用它，請使用 all-small-caps 值，此值會將大寫和小寫字元都轉為小型大寫字母。這是合理的行為，因為只想將小型大寫字母套用到大寫字元是罕見的情況。若要使用 font-feature-settings 獲得相同的效果，請使用「c2sc」和「smcp」特性標記。也請參閱：「使用多個 OpenType 特性的語法」。

花飾字 (swsh)

花飾字實際運作的範例，在 Bickham Script Pro 3 中設定。

此特性會將預設字元字符替換為對應的花飾字字符。

.class {
  -moz-font-feature-settings: "swsh";
  -webkit-font-feature-settings: "swsh";
  font-feature-settings: "swsh";
}

花飾字特性預設為停用狀態。

若要透過 font-feature-settings 啟用它，請使用「swsh」特性標記。請注意，給定的字元可能會有一個以上的替代花飾字。若要存取替代花飾字，請為該值新增數字索引：

.class {
  -moz-font-feature-settings: "swsh" 2;
  -webkit-font-feature-settings: "swsh" 2;
  font-feature-settings: "swsh" 2;
}

如果字體中有第二個可用的花飾字，這樣會啟用該花飾字。您可能已經猜到，就像我們的第一個程式碼範例一樣，使用「swsh」的值相當於使用「swsh 1」的值。

目前我們將略過 font-variant 屬性，因為其「具名」值 (就像 swash (flowing)) 會根據 font-feature-value CSS 定義對應到數字花飾字索引，但所有主要瀏覽器目前都尚未支援該定義。

文體替代字 (salt)

文體替代字實際運作的範例，在 Bree 中設定。

此特性會將預設字元字符替換為文體替代字。也請參閱：「文體集 (ss##)」。

.class {
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
}

文體替代字特性預設為停用狀態。

若要透過 font-feature-settings 啟用它，請使用「salt」特性標記。請注意，給定的字元可能會有一個以上的文體替代字。若要存取其他文體替代字，請為該值新增數字索引：

.class {
  -moz-font-feature-settings: "salt" 2;
  -webkit-font-feature-settings: "salt" 2;
  font-feature-settings: "salt" 2;
}

如果字體中有第二個可用的文體替代字，這樣會啟用該替代字。您可能已經猜到，就像我們的第一個程式碼範例一樣，使用「salt」的值相當於使用「salt 1」的值。

目前我們將略過 font-variant 屬性，因為其「具名」值 (沒有好的範例可提供) 會根據 font-feature-value CSS 定義對應到數字文體替代字索引，但所有主要瀏覽器目前都尚未支援該定義。

等高數字 (lnum)

等高數字的實際操作範例，在 Warnock Pro 中設定。

此特性會將數字字符從預設或舊式數字變成等高數字。請注意，某些字體可能包含等高數字當做其預設數字樣式，在這種情況下，啟用此特性可能看起來不會影響字符的樣式。

.class {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

等高數字特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-numeric 子屬性啟用它，請使用 lining-nums 值。若要使用 font-feature-settings 獲得相同的效果，請使用「lnum」特性標記。

舊式數字 (onum)

舊式數字的實際操作範例，在 Warnock Pro 中設定。

此特性會將數字字符從預設或等高數字變成舊式數字。請注意，某些字體可能包含舊式數字當做其預設數字樣式，在這種情況下，啟用此特性可能看起來不會影響字符的樣式。

.class {
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}

舊式數字特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-numeric 子屬性啟用它，請使用 oldstyle-nums 值。若要使用 font-feature-settings 獲得相同的效果，請使用「onum」特性標記。

比例數字 (pnum)

比例數字的實際操作範例，在 Hypatia Sans Pro 中設定。

此特性會將設為統一 (表格) 寬度的數字字符替換為設為字符特有 (比例) 寬度的對應字符。請注意，某些字體可能預設就包含比例數字，在這種情況下，啟用此特性可能看起來不會影響字符的寬度。

.class {
  font-variant-numeric: proportional-nums;
  -moz-font-feature-settings: "pnum";
  -webkit-font-feature-settings: "pnum";
  font-feature-settings: "pnum";
}

比例數字特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-numeric 子屬性啟用它，請使用 proportional-nums 值。若要使用 font-feature-settings 獲得相同的效果，請使用「pnum」特性標記。

表格數字 (tnum)

表格數字的實際操作範例，在 Hypatia Sans Pro 中設定。

此特性會將設為字符特有 (比例) 寬度的數字字符替換為設為統一 (表格) 寬度的對應字符。請注意，某些字體可能預設就包含表格數字，在這種情況下，啟用此特性可能看起來不會影響字符的寬度。

.class {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

表格數字特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-numeric 子屬性啟用它，請使用 tabular-nums 值。若要使用 font-feature-settings 獲得相同的效果，請使用「tnum」特性標記。

分數 (frac)

分數的實際操作範例，在 Warnock Pro 中設定。

$套用 frac CSS 的範例$

此特性會將斜線分隔的數字替換為一般 (斜角) 分數。

.class {
  font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}

分數特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-numeric 子屬性啟用它，請使用 diagonal-fractions 值。若要使用 font-feature-settings 獲得相同的效果，請使用「frac」特性標記。

序數 (ordn)

序數的實際操作範例，在 Warnock Pro 中設定。

此特性會將預設字母字符替換為對應的序數形式，以放在數字後面使用。

.class {
  font-variant-numeric: ordinal;
  -moz-font-feature-settings: "ordn";
  -webkit-font-feature-settings: "ordn";
  font-feature-settings: "ordn";
}

序數特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-numeric 子屬性啟用它，請使用 ordinal 值。若要使用 font-feature-settings 獲得相同的效果，請使用「ordn」特性標記。

請注意，並非所有字符替換都發生在數字後面。根據 OpenType 規範，「遵循數字規則的一個例外狀況為數字字元 (U+2116)，它實際上是連字替換，但最好透過此特性加以存取」。

文體集 (ss##)

文體集的實際操作範例，在 Hypatia Sans Pro 中設定。

此特性會將預設字元字符集替換為文體變體。文體集中的字符可設計為在視覺上協調一致、以特定方式互動或以其他方式協同合作。也請參閱：「文體替代字 (salt)」，其設計目的是為了提供個別字符的文體替代字。

.class {
  -moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}

文體集特性預設為停用狀態。

若要透過 font-feature-settings 啟用它，請使用「ss##」特性標記，其中「##」是從 01 到 20 的任何兩位數組合。請注意，字體會以完全隨意和自訂的方式採用文體集。例如，兩種不同的字體可以使用相同的特性 (如 ss01) 來替換完全不同的字符集；或者，特定字體可以使用 ss01 和 ss03 來替換字符集，但忽略 ss02。部分字體發行公司會提供有關如何組織特性的文件。

目前我們將略過 font-variant 屬性，因為其「具名」值 (例如 styleset(sharp-serifs)) 會根據 font-feature-value CSS 定義對應到數字文體集索引，但所有主要瀏覽器目前都尚未支援該定義。

比例寬度 (pwid)

比例寬度實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將設為統一寬度 (通常為全部或一半 em) 的字符替換為比例間距字符。比例變體通常是用於 CJKV 字體的拉丁字元，但也可用於日文字體的假名。(來源。)

.class {
  font-variant-east-asian: proportional-width;
  -moz-font-feature-settings: "pwid";
  -webkit-font-feature-settings: "pwid";
  font-feature-settings: "pwid";
}

比例寬度特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。若要透過 font-variant 屬性或 font-variant-east-asian 子屬性啟用它，請使用 proportional-width 值。若要使用 font-feature-settings 獲得相同的效果，請使用「pwid」特性標記。

改變寬度佔據比例 (palt)

改變寬度佔據比例實際運作的範例，在 Source Han Sans 中設定：

此特性會重新分隔用於設定為全寬 (完整 em) 的字符，使其適合個別 (或多或少成比例的) 水平寬度。這與 pwid 的不同之處在於，它不會替換新字符 (GPOS，而不是 GSUB 特性)。用戶可能偏好等距形式，或者可能只是想確定該字符的大小適中，而不會在垂直設定中旋轉 (專為比例間距設計的拉丁形式將會旋轉)。(來源。)

.class {
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

改變寬度佔據比例特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「palt」特性標記。

比例假名 (pkna)

比例假名實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將設為統一寬度 (半寬或全寬) 的假名和假名相關字符替換為比例字符。它類似於比例寬度特性，但只會影響假名。(來源。)

.class {
  -moz-font-feature-settings: "pkna";
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
}

比例假名特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「pkna」特性標記。

全寬 (fwid)

全寬實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將設為其他寬度的字符替換為設為全寬 (通常為 em) 的字符。在 CJKV 字體中，這可以包含「較低 ASCII」拉丁字元和各種符號。在歐洲字體中，此特性會將比例間距字符替換為等距字符，等距字符通常設為 0.6 em 的寬度。(來源。)

.class {
  font-variant-east-asian: full-width;
  -moz-font-feature-settings: "fwid";
  -webkit-font-feature-settings: "fwid";
  font-feature-settings: "fwid";
}

全寬特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。若要透過 font-variant 屬性或 font-variant-east-asian 子屬性啟用它，請使用 full-width 值。若要使用 font-feature-settings 獲得相同的效果，請使用「fwid」特性標記。

半寬 (hwid)

半寬實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將設為比例寬度或一半 em 以外的固定寬度的字符替換為設為一半 em (en) 寬度的字符。許多 CJKV 字體都有設為多種寬度的字符；此特性選擇一半 em 版本。在各種情況下，這都是慣用的行為，包括與較版桌面文件的相容性。(來源。)

.class {
  -moz-font-feature-settings: "hwid";
  -webkit-font-feature-settings: "hwid";
  font-feature-settings: "hwid";
}

半寬特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「hwid」特性標記。

變為半寬 (halt)

變為半寬實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會重新分隔用於設為全寬 (完整 em) 的字符，使其適合半寬 (一半 em)。這與 hwid 的不同之處在於，它不會替換新字符。(來源。)

.class {
  -moz-font-feature-settings: "halt";
  -webkit-font-feature-settings: "halt";
  font-feature-settings: "halt";
}

變為半寬特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「halt」特性標記。

三分之一寬 (twid)

三分之一寬實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將設為其他寬度的字符替換為設為三分之一 em 寬度的字符。涉及的字元通常是數字和某些形式的標點符號。(來源。)

.class {
  -moz-font-feature-settings: "twid";
  -webkit-font-feature-settings: "twid";
  font-feature-settings: "twid";
}

三分之一寬特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「twid」特性標記。

四分之一寬 (qwid)

四分之一寬實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將設為其他寬度的字符替換為設為四分之一 em (一半 en) 寬度的字符。涉及的字元通常是數字和某些形式的標點符號。(來源。)

.class {
  -moz-font-feature-settings: "qwid";
  -webkit-font-feature-settings: "qwid";
  font-feature-settings: "qwid";
}

四分之一寬特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「qwid」特性標記。

JIS78 形式 (jp78)

JIS78 形式實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將預設 (JIS90) 日文字符替換為 JIS C 6226-1978 (JIS78) 規範中的對應形式。(來源。)

.class {
  font-variant-east-asian: jis78;
  -moz-font-feature-settings: "jp78";
  -webkit-font-feature-settings: "jp78";
  font-feature-settings: "jp78";
}

JIS78 形式特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。若要透過 font-variant 屬性或 font-variant-east-asian 子屬性啟用它，請使用 jis78 值。若要使用 font-feature-settings 獲得相同的效果，請使用「jp78」特性標記。

JIS83 形式 (jp83)

JIS83 形式實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將預設 (JIS90) 日文字符替換為 JIS X 0208-1983 (JIS83) 規範中的對應形式。(來源。)

.class {
  font-variant-east-asian: jis83;
  -moz-font-feature-settings: "jp83";
  -webkit-font-feature-settings: "jp83";
  font-feature-settings: "jp83";
}

JIS83 形式特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。若要透過 font-variant 屬性或 font-variant-east-asian 子屬性啟用它，請使用 jis83 值。若要使用 font-feature-settings 獲得相同的效果，請使用「jp83」特性標記。

JIS90 形式 (jp90)

JIS90 形式實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將 JIS78 或 JIS83 規範中的日文字符替換為 JIS X 0208-1990 (JIS90) 規範中的對應形式。(來源。)

.class {
  font-variant-east-asian: jis90;
  -moz-font-feature-settings: "jp90";
  -webkit-font-feature-settings: "jp90";
  font-feature-settings: "jp90";
}

JIS90 形式特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。若要透過 font-variant 屬性或 font-variant-east-asian 子屬性啟用它，請使用 jis90 值。若要使用 font-feature-settings 獲得相同的效果，請使用「jp90」特性標記。

JIS2004 形式 (jp04)

JIS2004 形式實際運作的範例，在 Kozuka Mincho Pro 中設定：

日本國家語言委員會 (NLC) 為許多 JIS 字元定義了新的字符形狀，並將其以新的原型形式併入 JIS X 0213:2004。「jp04」特性是「nlck」特性的子集，用來以維持 JIS X 0213:2004 完整性的方式存取這些原型字符。(來源。)

.class {
  font-variant-east-asian: jis04;
  -moz-font-feature-settings: "jp04";
  -webkit-font-feature-settings: "jp04";
  font-feature-settings: "jp04";
}

JIS2004 形式特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。若要透過 font-variant 屬性或 font-variant-east-asian 子屬性啟用它，請使用 jis04 值。若要使用 font-feature-settings 獲得相同的效果，請使用「jp04」特性標記。

傳統形式 (trad)

傳統形式實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

將「簡體」漢字或日文漢字形式替換為對應的「傳統」形式。(來源。)

.class {
  font-variant-east-asian: traditional;
  -moz-font-feature-settings: "trad";
  -webkit-font-feature-settings: "trad";
  font-feature-settings: "trad";
}

傳統形式特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。若要透過 font-variant 屬性或 font-variant-east-asian 子屬性啟用它，請使用 traditional 值。若要使用 font-feature-settings 獲得相同的效果，請使用「trad」特性標記。

Ruby 表示形式 (ruby)

Ruby 表示形式實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

日文排版通常會使用較小的假名字符 (通常為上標形式) 來闡明漢字的意義 (讀者可能不熟悉其意義)。從舊的四點字型排版術語開始，它們就被稱為 ruby。此特性會識別字體中為此目的所設計的字符，並用它們來替代預設設計。(來源。)

.class {
  font-variant-east-asian: ruby;
  -moz-font-feature-settings: "ruby";
  -webkit-font-feature-settings: "ruby";
  font-feature-settings: "ruby";
}

Ruby 表示形式特性預設為停用狀態。若要透過 font-variant 屬性或 font-variant-east-asian 子屬性啟用它，請使用 ruby 值。若要使用 font-feature-settings 獲得相同的效果，請使用「ruby」特性標記。

請注意上面程式碼範例中我們設定樣式的 rt 元素。W3C 的 HTML5 規範中的文字層級語意章節中有說明 ruby 文字的正確標記。也請注意，ruby 文字的位置和大小在不同瀏覽器/版本中會有所不同；請考慮透過重設樣式表來停用瀏覽器預設值，並手動調整 ruby 文字的大小/位置。

水平假名替代 (hkna)

水平假名替代實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將標準假名替換為專為僅限水平書寫所設計的形式。這是印刷樣式最佳化的形式，可提高適合度並讓顏色更均勻。(來源。)

.class {
  -moz-font-feature-settings: "hkna";
  -webkit-font-feature-settings: "hkna";
  font-feature-settings: "hkna";
}

水平假名替代特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「hkna」特性標記。

NLC 漢字形式 (nlck)

NLC 漢字形式實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

日本國家語言委員會 (NLC) 於 2000 年為許多 JIS 字元定義了新的字符形狀。「nlck」特性是用來存取這些字符。(來源。)

.class {
  -moz-font-feature-settings: "nlck";
  -webkit-font-feature-settings: "nlck";
  font-feature-settings: "nlck";
}

NLC 漢字形式特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「nlck」特性標記。

備用註釋形式 (nalt)

備用註釋形式實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

此特性會將預設字符替換為各種符號註釋形式 (例如，放在空心或實心圓形、正方形、括號、菱形或圓形框中的字符)。在某些情況下，註釋形式可能已經存在，但用戶可能希望使用其他形式。(來源。)

.class {
  -moz-font-feature-settings: "nalt";
  -webkit-font-feature-settings: "nalt";
  font-feature-settings: "nalt";
}

備用註釋形式特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「nalt」特性標記。

斜體 (ital)

斜體實際運作的範例，在 Kozuka Mincho Pr6n 中設定：

某些字體 (例如 Adobe 的 Pro Japanese 字體) 在單一字體中將同時擁有某些字元的羅馬和斜體形式。此特性會將羅馬字符替換為對應的斜體字符。(來源。)

.class {
  -moz-font-feature-settings: "ital";
  -webkit-font-feature-settings: "ital";
  font-feature-settings: "ital";
}

斜體特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「ital」特性標記。

注意：關於垂直特性

以下 OpenType 特性藉由重新放置字符及重新設定其間距，讓垂直方向的文字擁有更好的外觀。然而，瀏覽器對垂直方向的支援有受到限制。因此，雖然瀏覽器可能會支援這些 OT 特性且能正常運作，但如果垂直方向沒有同時受到支援且無法正常運作…嗯，這些特性就無關緊要了。

.class {
  direction: rtl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

我們的程式碼是根據 W3C 的 CSS Writing Modes Level 3 編輯者草稿及這份來自 David Storey 的傑出研究。您可以看到它是如何形成的…但目前還是沒有瀏覽器支援。我們已測試過上面的程式碼，而且書寫模式僅適用於 Chrome。

垂直字距 (vkrn)

此特性會調整字符之間的間距，通常可在字符之間提供視覺上一致的間距。雖然設計良好的字體在整體上具有一致的字符間距，但某些字符組合仍需要進行調整以提高可讀性。除了垂直方向的標準調整之外，此特性還可以透過裝置表格提供與大小相關的字距微調資料、提供 X 文字方向的「跨流」字距微調，以及調整字符位置 (與事先調整無關)。請注意，此特性可能會套用到兩個以上的字符運行，並且不適用於等距字體。也請注意，此特性僅適用於垂直設定的文字。(來源。)

.class {
  -moz-font-feature-settings: "vkrn", "vpal";
  -webkit-font-feature-settings: "vkrn", "vpal";
  font-feature-settings: "vkrn", "vpal";
}

垂直字距特性預設為停用狀態，IE 或 Mac OS 或 iOS 上的任何 Safari 版本都不支援。雖然 Firefox 可能支援此特性，但還是不支援垂直文字，所以實際上不支援此特性。啟用它的唯一方法是搭配 font-feature-settings 使用「vkrn」特性標記。如果啟用 vkrn，也必須啟用 vpal (如果存在的話)。也請參閱：「使用多個 OpenType 特性的語法」和「注意：關於垂直特性」。

垂直交替 (vert)

在垂直書寫模式下，此特性會將預設形式替換為針對垂直書寫調整的變體。雖然大多數 CJKV 字符在設定為垂直書寫模式時依然保持垂直，但有些字符會針對此用途採用不同的形式 (通常會旋轉並重新定位)。此特性涵蓋的字符與通常在低階 DTP 應用程式中旋轉的集合相對應。(來源。)

垂直交替特性預設情況下已啟用，這表示您不必撰寫任何 CSS 應該就可以使用此特性，但是任何 IE 或 Firefox 版本預設皆未啟用此特性。此外，此特性完全無法在 Safari (Mac 或 iOS) 中啟用。也請參閱：「注意：關於垂直特性」。

.class {
  -moz-font-feature-settings: "vert";
  -webkit-font-feature-settings: "vert";
  font-feature-settings: "vert";
}

啟用垂直交替特性的唯一方法是搭配 font-feature-settings 使用「vert」特性標記。

比例替代垂直度量 (vpal)

此特性會重新分隔用於設定為全高 (完整 em) 的字符，使其適合個別 (或多或少成比例的) 垂直高度。這與 valt 的不同之處在於，它不會替換新字符 (GPOS，而不是 GSUB 特性)。用戶可能偏好等距形式，或者可能只是想確定字符的大小適中。(來源。)

.class {
  -moz-font-feature-settings: "vpal";
  -webkit-font-feature-settings: "vpal";
  font-feature-settings: "vpal";
}

比例替代垂直度量特性預設為停用狀態，IE 或是 Mac OS 或 iOS 上的任何 Safari 版本都不支援。雖然 Firefox 可能支援此特性，但還是不支援垂直文字，所以實際上不支援此特性。啟用它的唯一方法是搭配 font-feature-settings 使用「vpal」特性標記。也請參閱：「注意：關於垂直特性」。

替代垂直半度量 (vhal)

此特性會重新分隔用於設為全高 (完整 em) 的字符，使其適合半高 (一半 em)。(來源。)

.class {
  -moz-font-feature-settings: "vhal";
  -webkit-font-feature-settings: "vhal";
  font-feature-settings: "vhal";
}

替代垂直半度量特性預設為停用狀態，IE、Firefox 或是 Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「vhal」特性標記。也請參閱：「注意：關於垂直特性」。

垂直文字的替代日文假名形式 (vkna)

此特性會將標準假名替換為專為僅限垂直書寫所設計的形式。這是印刷樣式最佳化的形式，可提高適合度並讓顏色更均勻。也請參閱 hkna。(來源。)

.class {
  -moz-font-feature-settings: "vkna";
  -webkit-font-feature-settings: "vkna";
  font-feature-settings: "vkna";
}

垂直文字的替代日文假名形式特性預設為停用狀態，Mac OS 或 iOS 上的任何 Safari 版本都不支援。啟用它的唯一方法是搭配 font-feature-settings 使用「vkna」特性標記。也請參閱：「注意：關於垂直特性」。

字距微調 (kern)

字距微調的實際操作範例，在 Source Sans Pro 中設定：

此特性會調整字符之間的間距，通常可在字符之間提供視覺上一致的間距。雖然設計良好的字體在整體上具有一致的字符間距，但某些字符組合仍需要進行調整以提高可讀性。請注意，此特性可能會套用到兩個以上的字符運行，並且不適用於等距字體。也請注意，此特性不適用於垂直設定的文字。(來源。)

.class {
  font-kerning: normal;
  -moz-font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

字距微調特性預設為停用狀態，但在許多情況下，啟用此特性十分重要。

若要透過 font-kerning 屬性啟用它，請使用 normal 值。若要使用 font-feature-settings 獲得相同的效果，請使用「kern」特性標記。

字符組成/分解 (ccmp)

字符組成/分解實際運作的範例，在 Source Han Sans 中設定：

為了將替代字符的數量最小化，有時需要將一個字元分解為兩個字符。另外，為了以更好的方式處理字符，可能最好將兩個字元組合成單一字符。此特性允許這種組成/分解。此特性應該當做要處理的第一個特性進行處理，並且只有在被呼叫時才能處理。(來源。)

字符組成/分解特性預設為啟用狀態，這表示您不必撰寫任何 CSS 應該就可以使用此特性，但是在確定它已啟用時，有一些棘手的情況。Chrome 或 Safari 預設未啟用此特性，但使用任何 font-feature-settings 值將啟用它。

.class {
  -moz-font-feature-settings: "ccmp";
  -webkit-font-feature-settings: "ccmp";
  font-feature-settings: "ccmp";
}

若要確定字符組成/分解特性已啟用，請明確使用「ccmp」特性標記，或是其他任何 font-feature-settings 值。

本地化形式 (locl)

許多用於在廣泛地理地區書寫多種語言的文字已經開發出特定字母的本地化變體形式，個別文學團體會使用這些變體形式。例如，保加利亞文和塞爾維亞文字母表中的許多字母具有與其對應俄文字母不同的形式以及彼此不同的形式。在某些情況下，本地化形式與文字「規範」僅稍有不同，在其他情況下，兩者形式則完全不同。此特性可讓字符的本地化形式替代預設形式。(來源。)

本地化形式特性預設為啟用狀態，這表示您不必撰寫任何 CSS 應該就可以使用此特性，但實際上只有 Firefox 預設啟用此特性，Safari (Mac 或 iOS) 或 Android 中完全不支援此特性。

.class {
  -moz-font-feature-settings: "locl";
  -webkit-font-feature-settings: "locl";
  font-feature-settings: "locl";
}

若要確保已啟用本地化形式特性，請明確使用「locl」特性標記。

上標 (sups)

上標的實際操作範例，在 Hypatia Sans Pro 中設定。

此特性會將等高數字或舊式數字替換為上標字 (主要用於註腳指示)，並將小寫字母替換為上標字 (主要用於法文縮寫標題)。

.class {
  font-variant-position: super;
  -moz-font-feature-settings: "sups";
  -webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}

上標特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-position 子屬性啟用它，請使用 super 值。若要使用 font-feature-settings 獲得相同的效果，請使用「sups」特性標記。

下標 (subs)

下標的實際操作範例，在 Warnock Pro 中設定。

此特性可將預設字符替換為下標字符，或者可以將字符替換與用於提供適當位置的位置調整相結合。

.class {
  font-variant-position: sub;
  -moz-font-feature-settings: "subs";
  -webkit-font-feature-settings: "subs";
  font-feature-settings: "subs";
}

下標特性預設為停用狀態。

若要透過 font-variant 屬性或 font-variant-position 子屬性啟用它，請使用 sub 值。若要使用 font-feature-settings 獲得相同的效果，請使用「subs」特性標記。

Adobe

更快、更輕鬆地獲得協助

新的使用者？

Adobe MAX
創意大會

10 月 14 至 16 日邁阿密海灘和線上

立即報名

Adobe MAX

創意大會

10 月 14 至 16 日邁阿密海灘和線上

立即報名

Adobe MAX
創意大會

10 月 14 至 16 日邁阿密海灘和線上

立即報名

Adobe MAX

創意大會

10 月 14 至 16 日邁阿密海灘和線上

立即報名

CSS 中 OpenType 特性的語法

連字

字母

數字

文體集

東亞文字

寬度變化

文化變體

垂直特性

更多

通用/標準連字 (liga)

上下文交替 (calt)

選擇性連字 (dlig)

小寫字母轉為小型大寫字母 (smcp)

大寫字母轉為小型大寫字母 (c2sc)

花飾字 (swsh)

文體替代字 (salt)

等高數字 (lnum)

舊式數字 (onum)

比例數字 (pnum)

表格數字 (tnum)

分數 (frac)

序數 (ordn)

文體集 (ss##)

比例寬度 (pwid)

改變寬度佔據比例 (palt)

比例假名 (pkna)

全寬 (fwid)

半寬 (hwid)

變為半寬 (halt)

三分之一寬 (twid)

四分之一寬 (qwid)

JIS78 形式 (jp78)

JIS83 形式 (jp83)

JIS90 形式 (jp90)

JIS2004 形式 (jp04)

傳統形式 (trad)

Ruby 表示形式 (ruby)

水平假名替代 (hkna)

NLC 漢字形式 (nlck)

備用註釋形式 (nalt)

斜體 (ital)

注意：關於垂直特性

垂直字距 (vkrn)

垂直交替 (vert)

比例替代垂直度量 (vpal)

替代垂直半度量 (vhal)

垂直文字的替代日文假名形式 (vkna)

字距微調 (kern)

字符組成/分解 (ccmp)

本地化形式 (locl)

上標 (sups)

下標 (subs)

更快、更輕鬆地獲得協助