font-feature-settings:OpenTypeフォントの拡張書体の特性を制御する
初期値 | normal |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
font-feature-settingsプロパティの説明
font-feature-settings
は、OpenTypeフォントの拡張書体の特性を制御します。この機能は、ブラウザがテキストをレンダリングする祭に、フォントに備わっている特性を有効にするか無効にするのかを指定するものです。
font-feature-settings
を使用すると、日本語の文字詰め(カーニング)などが行なえます。現在、その役目はfont-variant
に関連するプロパティに移行しています。これから実装する場合は、font-variant
を使用して下さい。
font-feature-settingsに指定できる値
- normal
- フォントは既定値で表示されます。
- <feature-tag-value>
- OpenTypeフォントの特性を表すタグの値です。4文字のキーワードで示します。キーワードは二重の引用符で囲みます。オプションとして
on
とoff
を加えることができます。これは1
と0
でも指定できます。オプションを省略した場合はon
とみなされます。使用できるキーワードは、OpenType機能の構文で定義されているものを参照して下さい。
font-feature-settingsの使い方とサンプル
font-feature-settings
プロパティの構文は以下の通りです。
CSS
/* 既定値 */
font-feature-settings: normal;
/* タグのキーワード値 */
font-feature-settings: "pwid";
font-feature-settings: "pwid" on;
font-feature-settings: "pwid" 1;
font-feature-settings: "palt" off;
font-feature-settings: "palt" 0;
/* 複数の値を有効にする */
font-feature-settings: "liga", "onum";
font-feature-settings: "tnum", "swsh";
/* グローバル値 */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: unset;
font-feature-settingsの実例
それでは実際にfont-feature-settings
プロパティの書き方を見ていきましょう。以下の例は、フォントの文字詰め(カーニング)に関する振る舞いを変更した場合の比較です。全く同じ文章であっても、字幅や大文字小文字を制御することで、大きく印象が変わります。
表示確認
CSS
.samp_box {
overflow: auto;
width: 100%;
margin-top: 1rem;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
}
#ffs_pwid {
font-feature-settings: "pwid";
}
#ffs_fwid {
font-feature-settings: "fwid";
}
HTML
<section class="samp_box">
<h2>font-feature-settings: "pwid";</h2>
<p>指定なし:ABCDEFG. 0123456789. 漢字とひらがなとカタカナと。</p>
<p id="ffs_pwid">指定あり:ABCDEFG. 0123456789. 漢字とひらがなとカタカナと。</p>
</section>
<section class="samp_box">
<h2>font-feature-settings: "fwid";</h2>
<p>指定なし:ABCDEFG. 0123456789. 漢字とひらがなとカタカナと。</p>
<p id="ffs_fwid">指定あり:ABCDEFG. 0123456789. 漢字とひらがなとカタカナと。</p>
</section>
推奨される記法
font-feature-settings
を使用する場合は、関連するプロパティとの併記を推奨します。以下のように同じ特性を表す値を併記しておくことで、どちらかのプロパティが使用できない環境で補完されます。
CSS
/* 合字(リガチャ) */
.class {
font-variant: common-ligatures;
font-feature-settings: "liga";
}
/* スモールキャップ */
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
/* 複数の値の指定 */
.class {
font-variant: common-ligatures, oldstyle-nums;
font-feature-settings: "liga", "onum";
}
font-feature-settingsに関連するCSSプロパティ
フォント・文字色 | |
---|---|
color | 文字の色を指定する |
font | フォントに関する様々な機能を一括で指定する |
font-family | 文字フォントの種類を指定する |
font-feature-settings | OpenTypeフォントの拡張書体の特性を制御する |
font-kerning | フォントの文字詰め(カーニング)を制御する |
font-language-override | 文字を表示する祭に使用する言語情報を一時的に変更する |
font-size | 文字フォントの大きさを指定する |
font-size-adjust | 現在のフォントサイズを基準に小文字の大きさを相対的に調整する |
font-stretch | 表示させるフォントの幅広や幅狭のフェイスを指定する |
font-style | フォントを筆記体や斜体で表示するかどうかを指定する |
font-synthesis | 太字や斜体に対応していないフォントの加工を制御する |
font-variant | フォントの表示形式やブラウザの合成規則を一括で指定する |
font-variant-alternates | 文字フォントの代替字体(グリフ)の選定を制御する |
font-variant-caps | 文字列に適用されるキャピタライゼーションルールを制御する |
font-variant-east-asian | 東アジアの言語で使われる字体を制御する |
font-variant-ligatures | 隣り合った文字フォントの合字(リガチャ)を制御する |
font-variant-numeric | 数値に関する文字表記を制御する |
font-variant-position | 上付き文字や下付き文字として配置されるべき字体の使用を制御する |
font-weight | 文字フォントの太さを指定する |