CSS保健室｜font-feature-settings

font-feature-settings

font-feature-settings 是文字界劉謙，讓文字排版更加多變、絢麗，想知道它是怎麼變魔術的？那就繼續看下去吧！

（ 圖片來源 ）

font-feature-settings 控制 OpenType 字型中的高階排版功能，也就是可以讓 OpenType 字型排版更加精緻，符合實際開發需要， font-feature-settings 要想有作用，往往需要字型本身支援，因此多自定義字型中。

CSS font-feature-settings 語法並不複雜，只是支援的關鍵字屬性值眾多，這次要講的是 OpenType ， OpenType 字型特徵標籤非常多，可能有上百個，可以表現該標籤的字型也不同，這裡只會提到幾個。

語法

font-feature-settings: normal | <feature-tag-value>;

其中

<feature-tag-value> = <string> [ <integer> | on | off ]?

例如

/* 使用預設值 */
font-feature-settings: normal;

/* 使用 OpenType 特徵標籤 */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings: "smcp", "swsh" 2;

連字與變化（ Ligatures & Alternate ）

位置與距離（ Positions ）

數字（ Numbers ）

文體集（ Stylistic sets ）

寬度變化（ Width variants ）

文化變體（ Cultural variants ）

垂直特徵（ Vertical features ）

其他（ Others ）

關鍵字詳細語法和案例

Standard Ligatures : liga

主要針對英文書寫，可以讓多個單獨的字元表現為連續書寫，俗稱連字。

可以表現此特徵的字型： Adobe Warnock 系列字型

下面是兩個不同出處的效果對比：

CSS

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

和 clig 一同使用了。
此標籤設計為預設可用，也就是無需設定 CSS 就有連字效果，但實際 Chrome 下預設是禁用的，而 Safari 下不能被禁用。

Contextual Alternates : calt

包含上下交替的連字行為。

可以表現此特徵的字型： Adobe caflisch-script 系列字型

CSS

.calt { 
  font-feature-settings: "calt"; 
  font-variant-ligatures: common-ligatures;
}

此標籤設計為預設可用，也就是無需設定CSS就有連字效果，但實際 Chrome 下預設是禁用的，而 Safari 下不能被禁用。

Discretionary Ligatures : dlig

酌情連字。

可以表現此特徵的字型： Adobe Warnock 系列字型

此標籤設計為預設不可用，需要 CSS 開啟：

.dlig { font-feature-settings: "dlig"; }

Small Caps : smcp

此功能可將小寫字母轉換為小型大寫字母。

可以表現此特徵的字型： Adobe Warnock 系列字型 以及 蘋果 San Francisco 字型 。

此標籤設計為預設不可用，需要 CSS 開啟：

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

Capitals to Small Caps : c2sc

此功能可以將大寫字母轉換為小型大寫字母。

可以表現此特徵的字型： Adobe Warnock 系列字型 以及 蘋果 San Francisco 字型 。

此標籤設計為預設不可用，需要 CSS 開啟：

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

Access All Alternates : aalt

這是個比較特別的特徵，所有字型中包含的可替換的特徵，全部都向使用者呈現。

此效果在所有支援 ligation 和 alternate 形式的字型上都可以呈現，例如 Google 的 Sorts Mill Goudy 和 Google 的 Yanone Kaffeesatz 等。

CSS

.aalt { font-feature-settings: "aalt"; }

Swashes : swsh

此功能將預設字元字形替換為相應的斜線字形。

可以表現此特徵的字型： Adobe bickham-script 系列字型

CSS

.swsh { font-feature-settings: "swsh"; }

Contextual Swash : cswh

根據字母周圍的字元將字母轉換為虛線版本。

可以表現此特徵的字型： Adobe Bello 系列字型

CSS

.cswh { font-feature-settings: "cswh"; }

Historical Forms : hist

由使用者自行決定是否應用的過時形式的字元。

可以表現此特徵的字型： Google 的 Sorts Mill Goudy 字型 和 Google 的 Cardo 字型 等。

CSS

.hist { font-feature-settings: "hist"; }

Historical Ligatures : hlig

由使用者自行決定是否應用的過時的連字書寫形式。

可以表現此特徵的字型： Google 的 Cardo 等字型。

CSS

.hlig { font-feature-settings: "hlig"; }

Localised Forms : locl

用於在廣泛地理區域上編寫多種語言的任何指令碼都開發了特定字母的本地化變體形式，供各個文學社群使用。
例如，保加利亞和塞爾維亞字母表中的許多字母具有與俄羅斯對應字母，但形式彼此不同，在某些情況下，本地化形式僅與指令碼“規範”略有不同，在其他情況下，形式是完全不同的。

此功能可以將本地化的字形替換為預設形式。

可以表現此特徵的字型： 蘋果 San Francisco 字型。

此特徵標籤預設設計可用，但實際表現各個瀏覽器有差異。使用 CSS 示意：

.locl { font-feature-settings: "locl"; }

Localised Forms : rand

用隨機形式替換字元（ 用來模擬手寫 ）。

可以表現此特徵的字型： FF Kosmik 和 Punk Nova 和 MF FetaMont 。

表現示意如下截圖，仔細觀察可以看到下面一行連續字母大小參差，上面一行是沒有應用該標籤特性的效果：

CSS

.rand { font-feature-settings: "rand"; }

如果想要關閉隨機，程式碼如下：

.rand--off { font-feature-settings: "rand" 0, "calt" 0; }

Character Variant 1 – 99 : cv01-cv99

單個字元的多個變體（ 可能不適用於許多其他字元 ）。

Stylistic Alternates : salt

此功能使用變化的樣式替換預設字元字形。

可以表現此特徵的字型： Adobe 的 Bree 系統字型。

CSS

.salt { font-feature-settings: "salt"; }

Subscript : subs

此功能可以使用下標字形替換預設字形，或者可以將字形替換與定位調整組合以進行正確放置。

可以表現此特徵的字型： Adobe Warnock 系列字型。

CSS

.subs { font-feature-settings: "subs"; }

Superscript : sups

此功能用優質數字（ 主要用於腳註指示 ）替換襯裡或舊式數字，並用高階字母替換小寫字母（ 主要用於縮寫的法語標題 ）。

可以表現此特徵的字型： Adobe Hypatia Sans 系列字型。

CSS

.sups { font-feature-settings: "sups"; }

Titling Alternates : titl

此功能將預設字形替換為專門為標題設計的相應形式。這些可以是全身和（ 或 ）更大的身體，並且可以調整以便以更大的尺寸觀看。

可以表現此特徵的字型： Google 的 Allan 字型。

CSS

.titl { font-feature-settings: "titl"; }

Optical size : size

不是查詢：功能表嚮應用程式提供有關字型外觀和意圖的資訊，以幫助進行字型選擇。

可以表現此特徵的字型： Google 的 Source Sans Pro 字型。

Ornaments : ornm

這是一個雙功能功能，它使用兩種輸入方法讓使用者可以訪問字型中的裝飾字形（ 例如 fleurons ， dingbats 和 border 元素 ）。一種方法用全套可用裝飾字元替換專案符號字元；另一個用分配給它們的裝飾字元替換特定的“低階 ASCII ”字元。第一種方法支援普通使用者或瀏覽使用者；第二個支援高階使用者。

可以表現此特徵的字型： Clara 。

CSS

.ornm { font-feature-settings: "ornm"; }

Kerning : kern

此功能可調整字形之間的空間量，通常可在字形之間提供可見的一致的間距。雖然設計良好的字型總體上具有一致的字形間距，但是一些字形組合需要調整以提高易讀性。請注意，此功能可能適用於兩個以上字形的執行，並且不會用於等寬字型，此功能也不適用於垂直設定的文字。

大部分 OpenType 字型都支援此特徵，因此是一個可以在 web 中大範圍示意的屬性值。

CSS 使用示意，兩行 CSS 分別對應上面截圖的上下兩行：

.kern--off { font-feature-settings: normal; font-kerning: none; }
.kern { font-feature-settings: "kern"; }

Glyph Composition / Decomposition : ccmp

為了最小化字形交替的數量，有時需要將字元分解為兩個字形。另外，為了更好的字形處理，最好將兩個字元組合成單個字形。該特徵允許這種組合 / 分解。該特徵應作為處理的第一個特徵處理，並且只應在呼叫時處理。

Lining Figures : lnum

此功能將數字字形從預設或舊式數字更改為襯裡數字。請注意，某些字型可能包含襯裡圖形作為其預設圖形樣式，在這種情況下啟用此功能可能不會影響字形的樣式。

可以表現此特徵的字型： Adobe Warnock 系列字型 和 Adobe 的 Hypatia Sans 系列字型。

CSS

.lnum { font-feature-settings: "lnum"; }

Oldstyle Figures : onum

此功能將數字字形從預設或襯裡數字更改為舊式數字。請注意，某些字型可能包含舊樣式作為其預設圖形樣式，在這種情況下啟用此功能可能不會影響字形樣式。

可以表現此特徵的字型： Adobe Warnock 系列字型 和 Adobe 的 Hypatia Sans 系列字型。

應用此特徵，數字可以表現為上下高低錯落排列。

CSS

.onum { font-feature-settings: "onum"; }

Proportional Figures : pnum

原本預設字形的寬度是表格寬度，也就是各個字形有著統一的寬度表現，此功能可以把原本的寬度表現變成基於字形本身形狀下的特定寬度表現。請注意，某些字型預設情況下其寬度就是按照數字本身身形來的，在這種情況下啟用此功能可能不會影響字形的寬度，還有，等寬字型不受此功能影響。

可以表現此特徵的字型： Adobe 的 Hypatia Sans 系列字型。

上圖中的垂直線是為了方便大家看清楚每個數字寬度而畫出來的，實際上是沒有這些豎直線的。

CSS

.pnum { font-feature-settings: "pnum"; }

Tabular Figures : tnum

此功能和 pnum 正好是對立的。 tnum 是讓比例寬度顯示的數字變成按照表格寬度顯示，對比下面的圖就知道意思了：

尤其觀察數字 1 佔據的寬度， pnum 只有一點點寬度，按照字形比例來的，而這裡的 tnum 則寬度和後面的一致，按照表格寬度來的。

可以表現此特徵的字型： Adobe 的 Hypatia Sans 系列字型。

CSS

.tnum { font-feature-settings: "tnum"; }

Ordinals : ordn

表現為序列數字。

可以表現此特徵的字型： Adobe Warnock 系列字型。

CSS

.ordn { font-feature-settings: "ordn"; }

Fractions : frac

此功能將斜線分隔的數字替換為普通（ 對角線 ）分數。

可以表現此特徵的字型： Google 的 Ubuntu Mono 字型、 Adobe Warnock 系列字型、蘋果 San Francisco 字型。

CSS

.frac { font-feature-settings: "frac"; }

Alternative Fractions : afrc

將由斜線分隔的數字轉換為交替疊加分數形式，對比下圖可以感知到和 frac 分數表現形式的不同。

可以表現此特徵的字型： Google 的 Ubuntu Mono 字型。

CSS

.afrc { font-feature-settings: "afrc"; }

Denominator : dnom

轉換為適當的分數分母形式。

可以表現此特徵的字型： Google 的 Ubuntu Mono 字型 和 Adobe Hypatia Sans 系列字型。

CSS

.dnom { font-feature-settings: "dnom"; }

Numerator : numr

轉換為適當的分數分子形式。

可以表現此特徵的字型： Google 的 Ubuntu Mono 字型。

CSS

.numr { font-feature-settings: "numr"; }

Slashed Zero : zero

0 變成帶斜槓的 0 。

可以表現此特徵的字型： Adobe Warnock 系列字型、 Adobe Hypatia Sans 系列字型 以及 Google 的 Exo 字型 等。

CSS

.zero { font-feature-settings: "zero"; }

Mathematical Greek : mgrk

將希臘字形的標準印刷形式替換為數學符號中常用的相應形式（ 這是希臘字母表的一個子集 ）。

可以表現此特徵的字型： Fira Sans 、 FF DIN 、 FF Meta 。

CSS

.mgrk { font-feature-settings: "mgrk"; }

Stylistic Set 1 – 20 : ss01-ss20

此功能使用其他樣式替換預設字元字形集，可以看成是上面諸多字形特徵的另外一個數組名稱，範圍從 ss01-ss20 ，可以有 20 個代稱。這種多種風格集中在一起的字形，可以設計成在視覺上有特定規律、或以特定方式互動或以其他比較協調的方式，這樣，一字排開呈現的時候效果看上去會很舒服。

要使用 font-feature-settings 啟用它，請使用 ss## 作為功能標記，其中 ## 是 01-20 中的任意兩位數組合。請注意，字型以完全任意和自定義的方式使用樣式集。例如，兩種不同的字型可以使用相同的特徵（ 如ss01 ）來替換完全不同的字形集；或者，特定字型可以使用 ss01 和 ss03 來替換字形集，但忽略 ss02 。某些型別的生產這會提供有關如何組織功能的文件。

可以表現此特徵的字型： Adobe Hypatia Sans 系列字型 、 蘋果 San Francisco 字型 等很多字型。

Proportional Widths : pwid

字形寬度，東亞文字佔據寬度按照字形來算，通常用於 CJKV 字型中的拉丁字元，但也可用於日語字型中的假名。

Proportional Alternate Widths : palt

此功能可重新設定設計為全寬度寬度的字形，使其適合單獨（ 或多或少成比例 ）的水平寬度。這與 pwid 的不同之處在於它不能替代新的字形（ GPOS ，而不是 GSUB 功能 ）。使用者可能更喜歡等寬的形式，或者可能只是想確保字形適合並且不在垂直設定中旋轉。

Proportional Kana : pkna

此功能使用比例字形替換在均勻寬度（ 半寬或全寬 ）上設定的假名和假名相關字形，它類似於比例寬度功能，但僅影響假名。

Full Widths : fwid

此功能使用在完整（ 通常為 em ）寬度上設定的字形替換在其他寬度上設定的字形。在 CJKV 字型中，這可能包括“低 ASCII ”拉丁字元和各種符號，在歐洲字型中，此功能使用等寬字形替換按比例間隔的字形，這些字形通常設定為 0.6em 的寬度。

CSS

.fwid { font-feature-settings: "fwid"; }

Half Widths : hwid

某些字元佔據 em 一半寬度。

Alternate Half Widths : halt

此功能重新設定了設計為全寬度寬度的字形，使它們適合半寬寬度。這與 hwid 的不同之處在於它不能替代為新的字形。

例如預設情況下，有些標點雖然字形很小，但依然佔據 1em 寬度，就顯得很稀疏，如果表現為半寬度，則甚好。

CSS

.halt { font-feature-settings: "halt"; }

Third Widths : twid

1/3 寬。

CSS

.twid { font-feature-settings: "twid"; }

Quarter Widths : qwid

1/4 寬。

CSS

.qwid { font-feature-settings: "qwid"; }

JIS78 Forms : jp78

日語字形某規範形式。

JIS83 Forms : jp83

日語字形某規範形式。

JIS90 Forms : jp90

日語字形某規範形式。

JIS2004 Forms : jp04

日語字形某規範形式。

Traditional Forms : trad

用相應的“繁體”形式取代“簡體”的漢字形式。

在 Adobe 的 Kozuka Mincho 系統日文字型 中有效，中文字型目前沒有看到誰對此有所設計

CSS

.trad { font-feature-settings: "trad"; }

Expert Forms : expt

日語中有效。

Hojo Kanji Forms : hojo

日語中有效。

NLC Kanji Forms : nlck

日語中有效。

Ruby Notation Forms : ruby

日語體系中有效。

Horizontal Kana Alternates : hkna

日語專用，此功能將標準假名替換為專門為僅水平書寫而設計的形式。這是一種印刷優化方法，可以改善貼合度，使顏色更均勻。

Alternate Annotation Forms : nalt

此功能用各種符號形式替換預設字形（ 例如，放置在空心圓圈或實心圓圈，正方形，圓括號，菱形或圓形框中的字形 ）。 在某些情況下，註釋可能已經存在，但是使用者可能想要不同的註釋形式。

上面截圖，依次使用的 CSS 如下：

.nalt { font-feature-settings: "nalt"; }
.nalt-1 { font-feature-settings: "nalt" 1; }
.nalt-2 { font-feature-settings: "nalt" 2; }
.nalt-3 { font-feature-settings: "nalt" 3; }
.nalt-4 { font-feature-settings: "nalt" 4; }
.nalt-5 { font-feature-settings: "nalt" 5; }
.nalt-6 { font-feature-settings: "nalt" 6; }
.nalt-7 { font-feature-settings: "nalt" 7; }

Italics : ital

某些字型（ 例如 Adobe 的 Pro 日語字型 ）某些字元同時包含羅馬字形和斜體字形，此功能將羅馬字形替換為相應的斜體字形。

CSS

.ital { font-feature-settings: "ital"; }

Vertical Kerning : vkrn

此功能可調整字形之間的空間量，通常可在字形之間提供視覺上一致的間距。雖然設計良好的字型總體上具有一致的字形間距，但是一些字形組合需要調整以提高易讀性。除了垂直方向的標準調整之外，該功能還可以通過裝置表提供與尺寸相關的字距調整資料，在 X 文字方向上提供“交叉流”字距調整，並且可以調整字形位置，而與提前調整無關。請注意，此功能可能適用於兩個以上字形的執行，並且不會用於等寬字型，且此功能僅適用於垂直設定的文字。

CSS

.vkrn { font-feature-settings: "vkrn"; }

Vertical Alternates : vert

在垂直書寫模式下，此功能使用針對垂直書寫調整的變體替換預設表單。雖然大多數 CJKV 字形在垂直書寫模式下保持垂直，但有些字型採用不同的形式（ 通常是旋轉和重新定位 ）。此功能涵蓋的字形對應於通常在低端 DTP 應用程式中旋轉的字符集。

CSS

.vert { font-feature-settings: "vert"; }

Proportional Alternate Vertical Metrics : vpal

此功能可重新設定設計為全高度的字形，使其適合單個（ 或多或少比例 ）垂直高度。這與 valt 的不同之處在於它不能替代新的字形（ GPOS ，而不是 GSUB 特徵 ）。使用者可能更喜歡等寬的形式，或者可能只是想確保字形適合。

CSS

.vpal { font-feature-settings: "vpal"; }

Alternate Vertical Half Metrics : vhal

此功能可重新設定設計為全高度的字形，使其適合半高。

CSS

.vhal { font-feature-settings: "vhal"; }

Vertical Kana Alternates : vkna

此功能使用專門為垂直書寫設計的表單替換標準假名。這是一種印刷優化，可以改善貼合度，使顏色更均勻。

CSS

.vkna { font-feature-settings: "vkna"; }

Others

還有很多其他特徵關鍵字，瀏覽器尚未來得及跟進，有興趣可以參見這裡： Feature tags 。

（ 上方所有圖片的來源 ）

資料來源

1. CSS font-feature-settings 50+關鍵字屬性值完整介紹
2. Syntax for OpenType features in CSS
3. The Complete CSS Demo for OpenType Features
4. Registered features – definitions and implementations
5. MDN font-feature-settings