試一試
font-feature-settings: normal;
font-feature-settings: "liga" 0;
font-feature-settings: "tnum";
font-feature-settings: "smcp", "zero";
<section id="default-example">
<div id="example-element">
<p>Difficult waffles</p>
<table>
<tr>
<td><span class="tabular">0O</span></td>
</tr>
<tr>
<td><span class="tabular">3.14</span></td>
</tr>
<tr>
<td><span class="tabular">2.71</span></td>
</tr>
</table>
</div>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Fira Sans", sans-serif;
margin-top: 10px;
font-size: 1.5em;
}
#example-element table {
margin-left: auto;
margin-right: auto;
}
.tabular {
border: 1px solid;
}
語法
css
/* Use the default settings */
font-feature-settings: normal;
/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
"smcp",
"swsh" 2;
/* Global values */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: revert-layer;
font-feature-settings: unset;
在可能的情況下，Web 作者應該改用 font-variant 簡寫屬性或其相關的長寫屬性，例如 font-variant-ligatures、font-variant-caps、font-variant-east-asian、font-variant-alternates、font-variant-numeric 或 font-variant-position。
這些屬性比 font-feature-settings 能夠帶來更有效、可預測、易於理解的結果。font-feature-settings 是一個低階特性，旨在處理在沒有其他方法來啟用或訪問 OpenType 字型特性時的特殊情況。特別是，不應使用 font-feature-settings 來啟用小型大寫字母。
值
此屬性指定為關鍵字 normal 或逗號分隔的 <feature-tag-value> 值列表。渲染文字時，OpenType <feature-tag-value> 值列表將傳遞給文字佈局引擎以啟用或停用字型特性。
normal-
指示文字使用預設字型設定進行佈局。這是預設值。
<feature-tag-value>-
表示由一個標籤名稱和一個可選值組成的用空格分隔的元組。
標籤名稱始終是四個 ASCII 字元的
<string>。如果標籤名稱字元過多或過少，或者包含U+20–U+7E碼點範圍之外的字元，則描述符無效。可選值可以是正整數或關鍵字
on或off。關鍵字on和off分別是值1和0的同義詞。如果未設定值，則預設值為1。對於非布林型 OpenType 特性（例如樣式替換），該值表示要選擇的特定字形；對於布林型特性，該值開啟或關閉該特性。
正式定義
| 初始值 | normal |
|---|---|
| 應用於 | 所有元素和文字。它也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 是 |
| 計算值 | 同指定值 |
| 動畫型別 | 離散 |
正式語法
font-feature-settings =
normal |
<feature-tag-value>#
示例
啟用各種字型特性
css
/* use small-cap alternate glyphs */
.small-caps {
font-feature-settings: "smcp" on;
}
/* convert both upper and lowercase to small caps (affects punctuation also) */
.all-small-caps {
font-feature-settings: "c2sc", "smcp";
}
/* use zeros with a slash through them to differentiate from "O" */
.nice-zero {
font-feature-settings: "zero";
}
/* enable historical forms */
.historical {
font-feature-settings: "hist";
}
/* disable common ligatures, usually on by default */
.no-ligatures {
font-feature-settings: "liga" 0;
}
/* enable tabular (monospaced) figures */
td.tabular {
font-feature-settings: "tnum";
}
/* enable automatic fractions */
.fractions {
font-feature-settings: "frac";
}
/* use the second available swash character */
.swash {
font-feature-settings: "swsh" 2;
}
/* enable stylistic set 7 */
.fancy-style {
font-family: "Gabriola", cursive;
font-feature-settings: "ss07";
}
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # font-feature-settings-prop |
瀏覽器相容性
載入中…