CSS辞典 font-feature-settingsプロパティの解説

ギフト・ポイントGet!
css辞典 CSS辞典
この記事は約4分で読めます。

OpenTypeフォントの機能の有効・無効を指定する「font-feature-settingsプロパティ」の使用方法を掲載

CSS3/2.1

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

初期値 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個までのグリフを収録した多言語フォントを実現可能。

機能

normalOpenTypeフォントの機能を利用しません。
タグ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 実行サンプル

font-feature-settingsプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

font-feature-settingsプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

font-feature-settingsプロパティのedgeブラウザの実行結果

opera 実行サンプル

font-feature-settingsプロパティのoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました