font-variant-alternates
font-variant-alternates CSS 屬性控制替代字形的使用。這些替代字形可以透過 @font-feature-values 中定義的替代名稱進行引用。
@font-feature-values at-rule 可用於為給定的字體面關聯一個人類可讀的名稱與一個數字索引，該索引控制特定的 OpenType 字型特性。對於選擇替代字形的特性（stylistic、styleset、character-variant、swash、ornament 或 annotation），font-variant-alternates 屬性可以引用人類可讀的名稱以應用相關特性。
這允許 CSS 規則啟用替代字形，而無需知道特定字型用於控制它們的具體索引值。
語法
/* 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: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;
此屬性可以採用以下兩種形式之一：
- 關鍵字
normal - 或下面列出的一個或多個其他關鍵字和函式，以空格分隔，順序不限。
值
normal-
此關鍵字停用替代字形。
historical-forms-
此關鍵字啟用歷史形式——過去常見但現在不用的字形。它對應於 OpenType 值
hist。 stylistic()-
此函式為單個字元啟用風格替代。引數是對映到數字的字型特定名稱。它對應於 OpenType 值
salt，例如salt 2。 styleset()-
此函式為字元集啟用風格替代。引數是對映到數字的字型特定名稱。它對應於 OpenType 值
ssXY，例如ss02。 character-variant()-
此函式為字元啟用特定的風格替代。它類似於
styleset()，但不為字元集建立連貫的字形；單個字元將具有獨立的、不一定連貫的風格。引數是對映到數字的字型特定名稱。它對應於 OpenType 值cvXY，例如cv02。 swash()-
此函式啟用花式字字形。引數是對映到數字的字型特定名稱。它對應於 OpenType 值
swsh和cswh，例如swsh 2和cswh 2。 ornaments()-
此函式啟用裝飾，例如花飾和其他雜錦字形。引數是對映到數字的字型特定名稱。它對應於 OpenType 值
ornm，例如ornm 2。注意： 為了保留文字語義，字型設計者應將不與 Unicode 雜錦字元匹配的裝飾作為專案符號字元 (U+2022) 的裝飾變體。請注意，一些現有字型不遵循此建議。
annotation()-
此函式啟用註釋，例如帶圓圈的數字或反轉字元。引數是對映到數字的字型特定名稱。它對應於 OpenType 值
nalt，例如nalt 2。
正式定義
| 初始值 | normal |
|---|---|
| 應用於 | 所有元素和文字。它也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 是 |
| 計算值 | 同指定值 |
| 動畫型別 | 離散 |
正式語法
font-variant-alternates =
normal |
[ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]
<feature-value-name> =
<ident>
示例
啟用花式字字形
在此示例中，我們使用 @font-feature-values at-rule 為 MonteCarlo 字型的 swash 特性定義一個名稱。該規則將名稱 "fancy" 對映到索引值 1。
然後我們可以在 font-variant-alternates 中使用該名稱來為該字型啟用花式字。這等同於 font-feature-settings: "swsh" 1 這樣的行，只不過應用該特性的 CSS 不需要包含，甚至不需要知道，此特定字型所需的索引值。
HTML
<p>A Fancy Swash</p>
<p class="variant">A Fancy Swash</p>
CSS
@font-face {
font-family: "MonteCarlo";
src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
}
@font-feature-values "MonteCarlo" {
@swash {
fancy: 1;
}
}
p {
font-family: "MonteCarlo", cursive;
font-size: 3rem;
margin: 0.7rem 3rem;
}
.variant {
font-variant-alternates: swash(fancy);
}
結果
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # font-variant-alternates-prop |
瀏覽器相容性
載入中…