備忘録的プログラミングリファレンス

font-feature-settings プロパティ

　font-feature-settings プロパティは、OpenType フォントのもつ文章体裁機能を指定するプロパティです。
　日本語の文章が自然に見えるようにするための、文字詰め、自動カーニング機能があります。

　デフォルトでは、ブラウザのフォントは等幅で表示されますが、font-feature-settings プロパティは手で書いたように自然な字間と文字の大きさで表示できます。
　ただし、OpenType フォントで、プロポーショナルメトリクスデータがあるフォントに限られます。

フォントを指定し、字間と大きさを"palt" 1に指定
.font-YuMincho {
      font-family: 游明朝, "Yu Mincho", YuMincho;
}

.palt {
  font-feature-settings: "palt" 1;
}

詳しくは Example を参照してください

　使用するフォントは font-family で指定できますが、その指定フォントが使用できるかはユーザーの閲覧環境に依存します。ユーザーの OS に指定フォントが入っていないと代替えフォントで表示されます。

　簡単に利用するには OS 間で共通の OpenType フォントで、プロポーショナルメトリクス情報をもつフォントを使用します。Windows と macOS で標準で共通のフォントには、「游ゴシック体」、「游明朝体」などがあります。

　OpenType フォントに限らずに文字体裁機能を指定するには font-variant や font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric, font-variant-position プロパティが推奨されています。
　ただし、未対応ブラウザがあることに注意してください。

構文(Syntax)

CSS

font-feature-settings: normal | feature-value ;

DOM ( JavaScript )

値の取得
String = object.style.fontFeatureSettings;
値の設定
object.style.fontFeatureSettings=" normal | feature-value ";

値（Values）

Value摘要
normal初期値（default値）
feature-value"OpenTypeフォントのプロポーショナルメトリクス機能名"と[ 数値 | on | off ]の組み合わせ

備考（Remarks）

初期値（Default value）normal
継承（Inherited）Yes
CSS AnimationNo

Example

　font-feature-settings プロパティは、フォントがOpenTypeフォントでプロポーショナルメトリクス情報をもっていなければなりません。「ヒラギノ角ゴシック体」や「ヒラギノ明朝体」「游ゴシック体」「游明朝体」「Noto Sans CJK JP」で確かめてみましょう。

関連 CSS プロパティ

　関連するプロパティに以下があります。

fontfontに関するプロパティの一括指定
font-familyフォントファミリ
font-feature-settingsOpenTypeフォントのもつ文字体裁機能を指定
font-kerningフォント間の字詰め（文字間隔）
font-size大きさ
font-stretchフォントの表示幅
font-style文字のスタイル
font-variantスモールキャップの有無
font-variant-capsスモールキャップの有無
font-weight太さ

　テキストに関するプロパティには以下があります。

プロパティ概要
line-height行間
text-align、vertical-alignテキストの配置操作
background{ linear-gradient() }マーカーでラインを引いたような装飾

関連（Related）