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

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」で確かめてみましょう。