font-feature-settings
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年4月.
font-feature-settings は CSS のプロパティで、 OpenType フォントの拡張書体の特性を制御します。
試してみましょう
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;
}
構文
/* 既定の設定を使用する */
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;
/* グローバル値 */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: revert-layer;
font-feature-settings: unset;
可能な限り、ウェブの作者は代わりに 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>-
タグ名とオプション値からなる、空白区切りのデータ列を表します。
タグ名は
<string>で、常に 4 つの ASCII 文字からなります。タグ名の文字数が多かったり少なかったり、U+20–U+7Eコードポイント範囲外の文字を格納している場合、記述子は無効になります。オプション値は正の整数か、キーワード
onまたはoffにすることができます。キーワードonおよびoffは、それぞれ値1および0と同義語です。値が設定されていない場合は、既定で1になります。論理値でない OpenType 特性 （stylistic alternates など）では、この値は選択する具体的な字体を意味し、論理値の特性の場合は、その特性のオンとオフを意味します。
公式定義
| 初期値 | normal |
|---|---|
| 適用対象 | すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式定義
font-feature-settings =
normal |
<feature-tag-value>#
例
様々なフォント特性を有効にする
/* スモールキャップ代替字形 */
.small-caps {
font-feature-settings: "smcp" on;
}
/* 大文字と小文字の両方をスモールキャップに変換 (記号も) */
.all-small-caps {
font-feature-settings: "c2sc", "smcp";
}
/* スラッシュのついたゼロを使用して "O" と区別する */
.nice-zero {
font-feature-settings: "zero";
}
/* 歴史的な書体を有効に */
.historical {
font-feature-settings: "hist";
}
/* よくある合字を無効にする (既定ではオン) */
.no-ligatures {
font-feature-settings: "liga" 0;
}
/* 表内の数字を有効にする (等幅) */
td.tabular {
font-feature-settings: "tnum";
}
/* 自動的に分数化する */
.fractions {
font-feature-settings: "frac";
}
/* 利用可能な2番目のスウォッシュ文字を使用 */
.swash {
font-feature-settings: "swsh" 2;
}
/* スタイリッシュセット 7 を有効にする */
.fancy-style {
font-family: Gabriola;
font-feature-settings: "ss07";
}
仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # font-feature-settings-prop |
ブラウザーの互換性
Loading…