CSS辞典 font-feature-settingsプロパティの解説
OpenTypeフォントの機能の有効・無効を指定する「font-feature-settingsプロパティ」の使用方法を解説
対応バージョン：CSS3／2.1
対応ブラウザ
| 初期値 | normal |
| 適用される要素 | すべての要素 |
| モジュール | CSS Fonts Module Level3及びLevel4 |
| 継承 | あり |
概要・使用方法
{font-feature-settings: 機能 有効/無効;}font-feature-settingsプロパティは、OpenTypeフォントの機能の有効/無効を指定します。OpenTypeフォントの主要なものは、「ヒラギノ角ゴシック体」、「ヒラギノ明朝体」、「游ゴシック体」、「游明朝体」、「Noto Sans CJK JP」などがあります。
font-feature-settingsプロパティの機能は、対象の機能が指定可能な「OpenType」フォントのみで利用できます。
OpenTypeフォントとは？
マイクロソフト社とアドビ社により開発されたデジタルフォントの規格。MacとWindows 間のクロスプラットフォームで同じフォントファイルを利用できるようにしたもの。
Unicodeに完全対応しており、異体字などを含む65536個までのグリフを収録した多言語フォントを実現可能。
機能
| normal | OpenTypeフォントの機能を利用しません。 |
| タグ | OpenTypeフォントのfeatureタグを引用符（””）で囲んで指定します。複数のタグはカンマ（,）で区切って指定可能です。 利用できるfeatureタグはフォントによって異なりますが、日本語のフォントであれば異体字や半角文字、特殊記号などを表示できます。 使用できる機能は、以下のURL確認できます。 https://docs.microsoft.com/ja-jp/typography/opentype/spec/featurelist |
| OpenTypeフォントの機能 | 機能タグ |
|---|---|
| 合字（リガチャ）を推定する | liga、dlig、hligなど |
| スモールキャピタルなどの大文字体で表示 | smcp、c2sc、pcap、titl、unicなど |
| 数値の表示形式 | lnum、onum、pnum、tnum、frac、afrc、zeroなど |
| フォントに用意されている代替文字を利用する | salt、calt、clig、histなど |
| フォントに用意されているスタイルセットでの代替文字を利用する | ss + インデックス番号 |
| 特定の文字の表示機能を利用する | cv + インデックス番号 |
| 装飾文字 | swsh、cswh、ornm、nalt、rubyなど |
| 漢字の表示について指定 | jp78、jp83、jp90、jp04、smpl、trad、fwid、pwidなど |
有効/無効
| 0 | 機能を有効 |
| 1 | 機能を無効 |
漢字以外はすべて半角で表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>font-feature-settings CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
p.fonttype1{
font-family: "メイリオ",serif;
font-feature-settings:hwid;
-webkit-font-feature-settings:"hwid";
}
</style>
</head>
<body>
<p class="fonttype1">夜光虫はどこにいる？</p>
</body>
</html>夜光虫はどこにいる？
chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
