font-feature-settings プロパティ
font-feature-settings プロパティは、OpenType フォントのもつ文章体裁機能を指定するプロパティです。
日本語の文章が自然に見えるようにするための、文字詰め、自動カーニング機能があります。
デフォルトでは、ブラウザのフォントは等幅で表示されますが、font-feature-settings プロパティは手で書いたように自然な字間と文字の大きさで表示できます。
ただし、OpenType フォントで、プロポーショナルメトリクスデータがあるフォントに限られます。
.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 プロパティが推奨されています。
ただし、未対応ブラウザがあることに注意してください。
ページ内 Index
構文(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」で確かめてみましょう。
関連 CSS プロパティ
関連するプロパティに以下があります。
font | fontに関するプロパティの一括指定 |
font-family | フォントファミリ |
font-feature-settings | OpenTypeフォントのもつ文字体裁機能を指定 |
font-kerning | フォント間の字詰め(文字間隔) |
font-size | 大きさ |
font-stretch | フォントの表示幅 |
font-style | 文字のスタイル |
font-variant | スモールキャップの有無 |
font-variant-caps | スモールキャップの有無 |
font-weight | 太さ |
テキストに関するプロパティには以下があります。
プロパティ | 概要 |
---|---|
line-height | 行間 |
text-align、vertical-align | テキストの配置操作 |
background{ linear-gradient() } | マーカーでラインを引いたような装飾 |