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 実行サンプル