font-feature-settings プロパティ
font-feature-settings プロパティは、OpenTypeフォントのもつ文章体裁機能を指定するプロパティです。
日本語の文章が自然に見えるようにするための、文字詰め、自動カーニング機能があります。
デフォルトでは、ブラウザのフォントは等幅で表示されますが、font-feature-settings ロパティは手で書いたように自然な字間と文字の大きさで表示できます。
ただし、OpenTypeフォントで、プロポーショナルメトリクスデータがあるフォントに限られます。
.font-YuMincho { font-family: 游明朝, "Yu Mincho", YuMincho; } .palt { font-feature-settings: "palt" 1; }
使用するフォントは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 Animation | No |
Example
font-feature-settings プロパティは、フォントがOpenTypeフォントでプロポーショナルメトリクス情報をもっていなければなりません。「ヒラギノ角ゴシック体」や「ヒラギノ明朝体」「游ゴシック体」「游明朝体」「Noto Sans CJK JP」で確かめてみましょう。