CSS - font-feature-settings
概要
属性名 | font-feature-settings |
---|---|
値 | normal | <feature-tag-value>, ... |
値の詳細 | <feature-tag-value> = <string> [ <integer> | on | off ]? |
初期値 | normal |
適用可能要素 | すべての要素 |
継承 | 継承する |
メディア | Visual |
サポート | C3 / e10 / Fx4(-moz) / Ch16(-webkit) |
説明
OpenType フォント自体が持つ低レベル制御機能を制御します。font-variant でサポートされているなら、極力 font-variant を使用することが推奨されています。
値 | 説明 |
---|---|
normal | 制御機能を利用しません。 |
<feature-tag-value> | 4文字の機能名と、必要に応じでパラメータを指定します。on は 1 と、off は 0 と同じ意味を持ちます。カンマで連結することで、複数の機能を同時に指定することが可能です。(例: "liga", "swsh" 2) |
機能の詳細は下記のサイトで詳しく説明されています。
- CSS での OpenType 機能の構文 (by Adove Typekit)
使用例
CSS
.none { -webkit-font-feature-settings: normal; -moz-font-feature-settings: normal; -ms-font-feature-settings: normal; font-feature-settings: normal; } .liga { -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga"; font-feature-settings: "liga"; } .smcp { -webkit-font-feature-settings: "smcp"; -moz-font-feature-settings: "smcp"; -ms-font-feature-settings: "smcp"; font-feature-settings: "smcp"; } .c2sc { -webkit-font-feature-settings: "c2sc"; -moz-font-feature-settings: "c2sc"; -ms-font-feature-settings: "c2sc"; font-feature-settings: "c2sc"; } :
HTML
// <b>liga</b> <div style="font-family: 'メイリオ'"> <div class="none">fi fl などの文字が連結されます</div> <div class="liga">fi fl などの文字が連結されます</div> </div> <br> // <b>smcp</b> <div class="none">New York 小文字をスモールキャップスで表示します</div> <div class="smcp">New York 小文字をスモールキャップスで表示します</div> <br> // <b>c2sc</b> <div class="none">Google 大文字をスモールキャップスで表示します</div> <div class="c2sc">Google 大文字をスモールキャップスで表示します</div> :
表示
// liga
// smcp
// c2sc
// zero
// lnum
// onum
// pnum
// tnum
// frac
// ordn
// fwid
// hwid
// twid
// qwid
// ital
// kern
// sups
fi fl などの文字が連結されます
fi fl などの文字が連結されます
// smcp
New York 小文字をスモールキャップスで表示します
New York 小文字をスモールキャップスで表示します
// c2sc
Google 大文字をスモールキャップスで表示します
Google 大文字をスモールキャップスで表示します
// zero
ゼロ(0)の文字に斜線を表示します
ゼロ(0)の文字に斜線を表示します
// lnum
0123456789 数字をライニング字形で表示します
0123456789 数字をライニング字形で表示します
// onum
0123456789 数字をオードルスタイル字形で表示します
0123456789 数字をオードルスタイル字形で表示します
// pnum
0123456789 数字をプロポーショナル字形で表示します
0123456789 数字をプロポーショナル字形で表示します
// tnum
0123456789 数字を等幅字形で表示します
0123456789 数字を等幅字形で表示します
// frac
1/2 分数を左記の様に表示します
1/2 分数を左記の様に表示します
// ordn
1st 2nd 3rd 分数を左記の様に表示します
1st 2nd 3rd 分数を左記の様に表示します
// fwid
ハンカクカタカナを全角で表示します
ハンカクカタカナを全角で表示します
// hwid
ゼンカクカナを半角で表示します
ゼンカクカナを半角で表示します
// twid
123円。数字を 1/3em の幅で表示します
123円。数字を 1/3em の幅で表示します
// qwid
1234円。数字を 1/4em の幅で表示します
1234円。数字を 1/4em の幅で表示します
// ital
Italic イタリック体で表示します
Italic イタリック体で表示します
// kern
YaYuYo カーニング(字詰め)して表示します
YaYuYo カーニング(字詰め)して表示します
// sups
123 上付き文字で表示します
123 上付き文字で表示します
関連項目
font-variantリンク
- http://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop
- https://developer.mozilla.org/ja/docs/Web/CSS/font-feature-settings
- http://caniuse.com/#feat=font-feature
Copyright (C) 2015 杜甫々
初版:2015年11月15日、最終更新:2015年11月15日
https://www.tohoho-web.com/css/prop/font-feature-settings.htm