We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

font-feature-settings CSS プロパティは OpenType フォントの先進的なタイポグラフィの機能を制御します。

/* デフォルト設定を使用する */
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: unset;

構文

注記: 可能であればいつでも、ウェブ著者は font-variant ショートハンドプロパティまたは個別のプロパティである font-variant-ligaturesfont-variant-capsfont-variant-east-asianfont-variant-alternatesfont-variant-numericfont-variant-position プロパティを使うべきです。

このプロパティは、OpenType フォントの機能を有効にする方法やアクセスの方法が他にない、特別な状況を扱うために設計されてきました。

特に、スモールキャップの表現にこのプロパティを使うべきではありません。
初期値normal
適用対象全要素。 ::first-letter and ::first-line にも適用されます。
継承継承する
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

normal
テキストはデフォルト設定で配置されます。
<feature-tag-value>
テキストの描画時、OpenType の機能タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の <string> です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。
値は正の整数です。キーワード onoff はそれぞれ 10 の別名です。値がセットされていなければ、デフォルトは 1 です。 非真偽値の OpenType 機能(例: stylistic alternates)では、この値は選ばれる特定のグリフを意味します。真偽値の機能はオンとオフを切り替えます。

形式文法

normal | <feature-tag-value>#

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

/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }

/* convert both upper and lowercase to small caps (affects punctuation also) */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* enable historical forms */
.hist { font-feature-settings: "hist"; }

/* disable common ligatures, usually on by default */
.noligs { 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 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}

仕様

仕様書 策定状況 コメント
CSS Fonts Module Level 3
font-feature-settings の定義
勧告候補 最初の定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

48

16 -webkit-

15

341

15 -moz- 2

10

35

15 -webkit-

9.1

4 — 6

機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4.448 あり

341

15 -moz- 2

あり

9.3

3.2 — 6.1

5.0

1. The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.

2. From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: momdo, takahashim, yyss, Guillaume-Heras, Sebastianz, ethertank, sosleepy
最終更新者: momdo,