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

fi fl などの文字が連結されます

// smcp

New York 小文字をスモールキャップスで表示します

// c2sc

Google 大文字をスモールキャップスで表示します

// zero

ゼロ(0)の文字に斜線を表示します

// lnum

0123456789 数字をライニング字形で表示します

// onum

0123456789 数字をオードルスタイル字形で表示します

// pnum

0123456789 数字をプロポーショナル字形で表示します

// tnum

0123456789 数字を等幅字形で表示します

// frac

1/2 分数を左記の様に表示します

// ordn

1st 2nd 3rd 分数を左記の様に表示します

// fwid

ﾊﾝｶｸｶﾀｶﾅを全角で表示します

// hwid

ゼンカクカナを半角で表示します

// twid

123円。数字を 1/3em の幅で表示します

// qwid

1234円。数字を 1/4em の幅で表示します

// ital

Italic イタリック体で表示します

// kern

YaYuYo カーニング(字詰め)して表示します

// sups

123 上付き文字で表示します

リンク

初版：2015年11月15日、最終更新：2015年11月15日

https://www.tohoho-web.com/css/prop/font-feature-settings.htm

CSS - font-feature-settings

概要

説明

使用例

関連項目

リンク