ほんっとにはじめてのHTML5とCSS3：【31】OpenType機能を直接指定できる font-feature-settings

【31】OpenType機能を直接指定できる font-feature-settings

最終更新日：2019年07月03日　（初回投稿日：2018年05月30日）

前回までの font-variant 関連のプロパティも、OpenTypeフォントの機能を利用するものでした。あっちはプロパティの値で機能を指定しましたが、今回の font-feature-settingsプロパティは、OpenTypeフォントの機能を半角小文字4文字の機能タグ値（feature-tag-value）でジカに指定できます。

W3C の仕様書は、この font-feature-settingsプロパティは、font-variant 関連のプロパティで対応できる場合には、使うべきでないとしています。

このプロパティは「他の方法で OpenTypeフォント機能を使うことができない場合のための低レベルの機能」とされています。
特に「スモールキャップ」の表示で使わずに、font-variant-capsプロパティを使えって。

ですが、font-feature-settingsプロパティのほうがブラウザ実装が進んでいて、IE11, Edge も対応しています。（2018年5月記）

font-feature-settingsプロパティも font-variant 関係のプロパティも、Fonts Module Level 3 に含まれていて、これはまだ勧告候補。
今のところ font-variant 関係プロパティはまだ実装ブラウザが少ないので、font-feature-settingsプロパティのほうが使えるのが現状です。（2018年5月記）

本日のINDEX

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation | Shorthand font property: the font-feature-settings property
・font-feature-settings - CSS | MDN

font-feature-settingsプロパティの値

font-feature-settingsプロパティの値です。

font-feature-settingsプロパティの値
キーワード	normal：デフォルト値。OpenType機能を指定しません。
機能タグ値 feature-tag-value	4文字の ASCII文字による値です。4文字より多い・少ないとエラーになります。（値の種類は下に詳細）
グローバル値	inherit　親のfont-weightの値を継承（コレ書かなくても継承するけど） initial　継承した親の font-weightの値を解消しデフォルト値に戻す unset　値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

OpenTypeフォントとは

OpenTypeフォント（Open Type Font = OTF）は、デジタルフォントの規格です。

デジタルフォントは、大昔は等幅のビットマップフォントだけでした。文字コードは ASCII だけの時代です。
その後1990年代はじめ、Adobe の PostScript（ポストスクリプト = PS ）、Apple の TrueType（トゥルータイプ = TT ）といった「アウトライン情報を持つフォント」が登場しました。

OpenType は、Microsoft と Apple が共同開発した規格で「TrueType を発展させ、PostScriptフォントのアウトラインデータも収録できるようにしたもの」だそうです。
Unicode に対応し、6万個以上の字体を収録した、多言語に対応できるんだって。
同じフォントを、Win・Mac・インクジェットプリンタ・ポストスクリプトプリンタなどの区別なく使えます。

ちなみに、この後 Webフォントの規格として、WOFF（Web Open Font Format）が登場しました。Mozilla（Firefoxの会社）が開発し、2011年に W3Cが Web標準の1つとして勧告。
実体は OpenType と同じですが、圧縮方法が違い、メタデータなどが加わったものだそうです。

OpenType には、拡張機能があることが最大のメリット。
リガチャ、字体切替、プロポーショナルメトリクス、カーニングなど、たくさんの機能があります。

font-variant 関係のプロパティの「値（キーワード）」は、その拡張機能を利用するためのもの。

font-feature-settingsプロパティは、もっと直接的に、OpenType の拡張機能の OpenType機能タグ値（feature-tag-value）を値として指定できます。

font-feature-settingsプロパティの使い方

font-feature-settingsプロパティの指定方法は、わりと単純ですが、いくつかルールがあります。

OpenType機能タグ値は「必ず4文字」

OpenType機能タグ値（feature-tag-value）は、必ず半角英数字 4文字です。それより多くても少なくても無効。タグ値が間違ったら当然無効です。

/* smcp は small-caps を有効化します*/
font-feature-settings: "smcp";
/* 下の指定は無効（値が5文字だし）*/
font-feature-settings: "smcap";
/* 下の指定は無効（書き間違い）*/
font-feature-settings: "smpc";

＊OpenType機能タグ値（feature-tag-value）のリストはこちら

値は " "（ダブルクォーテーション）か ' '（シングルクォーテーション）で囲む

OpenType機能タグ値は「 " "（ダブルクォーテーション）」または「 ' '（シングルクォーテーション）」で囲んで使います。

/*ダブルクォーテーション*/
font-feature-settings: "smcp";

<!--インラインで書くときは、シングルクォーテーションがいいね-->
<p style="font-feature-settings: 'smcp'; font-weight: bold">...</p>

有効は 1 か on。無効は 0 か off。1 がデフォルト

OpenType機能タグ値（feature-tag-value）の後に、有効は 1 か on、無効にしたいときは 0 か off を「半角スペース」で区切って付けます。
デフォルトは「1」なので、何も書かなければ「有効」ということ。無効にしたいときだけ、0 か off を付け足そう。

以下の指定は、すべて同じ指定です。

font-feature-settings: "smcp";
font-feature-settings: "smcp" 1;
font-feature-settings: "smcp" on;

指定した OpenType機能タグ値を無効にしたい場合は、下記のように指定します。

font-feature-settings: "smcp" 0;
font-feature-settings: "smcp" off;

複数指定は「,（カンマ）」で区切る

OpenType機能タグ値を複数指定したいときは「,（カンマ）」で区切ります。

font-feature-settings: "c2sc", "smcp";

スワッシュ（swsh）など複数の置き換え字体があるときは番号を書く

スワッシュ（swsh）、デザインのバリエーション（salt）、オーナメント（ornm）、アノテーション（nalt）など、置き換え字体に複数の選択肢がある場合は、「単位なしの正の整数」で何番目の置き換え字体か指定できます。

/*1番目のスワッシュ字体が有効*/
font-feature-settings: "swsh";
/*2番目のスワッシュ字体が有効*/
font-feature-settings: "swsh" 2;
/*スモールキャップが有効。スワッシュは1番目のスワッシュ字体が有効*/
font-feature-settings: "smcp" 1, "swsh" 1;
/*3番目のオーナメント字体が有効。1番目のスワッシュ字体が有効*/
font-feature-settings: "ornm" 3, "swsh";

OpenType機能タグ値（feature-tag-value）

たくさんの値がありますが、まずは font-variantプロパティでの指定と同じ機能を使う OpenType機能タグ値の一覧です。

・font-variant-capsで使うOpenType機能
・font-variant-positionで使うOpenType機能
・font-variant-ligaturesで使うOpenType機能
・font-variant-numericで使うOpenType機能
・font-variant-alternatesで使うOpenType機能
・font-variant-east-asianで使うOpenType機能

font-feature-settingsプロパティでしか指定できない機能もあります。

・font-feature-settingsプロパティでしか指定できないOpenType機能抜粋

font-variant-caps

smcp 小文字をスモールキャップで表示

font-variant-caps: small-caps;
font-feature-settings: "smcp";

c2sc, smcp 大文字も小文字もスモールキャップで表示
```
font-variant-caps: all-small-caps;
font-feature-settings: "c2sc", "smcp";
```
(未指定)Fonts Module

(font-feature-settings: "c2sc", "smcp")Fonts Module

pcap 小文字をプチキャップ（petite caps）で表示

font-variant-caps: petite-caps;
font-feature-settings: "pcap";

c2pc, pcap 大文字も小文字もプチキャップに

font-variant-caps: all-petite-caps;
font-feature-settings: "c2pc", "pcap";

unic 大文字をスモールキャプ、小文字は通常の字体で
```
font-variant-caps: unicase;
font-feature-settings: "unic";
```

titl タイトル用の大文字で表示

font-variant-caps: titling-caps;
font-feature-settings: "titl";

font-variant-position

subs 下付き文字グリフで表示

font-variant-position: sub;
font-feature-settings: "subs";

sups 上付き文字グリフで表示

font-variant-position: super;
font-feature-settings: "sups";

font-variant-ligatures

liga, clig 常用合字（fi fl など）

font-variant-ligatures: common-ligatures;
font-feature-settings: "liga", "clig";

dlig 任意のリガチャ（フォントデザイナーが作った合字）

font-variant-ligatures: discretionary-ligatures;
font-feature-settings: "dlig";

hlig 古典的なリガチャ（ドイツ語の t と z の合字 tz など）
```
font-variant-ligatures: historical-ligatures;
font-feature-settings: "hlig";
```
calt 前後の文字による字体の変更（スクリプト体（筆記体）での「文字の連結」など
```
font-variant-ligatures: contextual;
font-feature-settings: "calt";
```
font-variant-numeric

lnum 数字をライニング数字で表示

font-variant-numeric: lining-nums;
font-feature-settings: "lnum";

onum 数字をオールドスタイル数字で表示

font-variant-numeric: oldstyle-nums;
font-feature-settings: "onum";

pnum 数字をプロポーショナル数字で表示

font-variant-numeric: proportional-nums;
font-feature-settings: "pnum";

tnum 数字を等幅で表示

font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";

frac 分数をスラッシュで表示

font-variant-numeric: diagonal-fractions;
font-feature-settings: "frac";

afrc 分数を水平線で表示

font-variant-numeric: stacked-fractions;
font-feature-settings: "afrc";

ordn 序数詞を上付き文字で表示

font-variant-numeric: ordinal;
font-feature-settings: "ordn";

zero ゼロをスラッシュ付きのゼロで表示

font-variant-numeric: slashed-zero;
font-feature-settings: "zero";

font-variant-alternates

hist 古典的な字形に置き換え

font-variant-alternates: historical-forms;
font-feature-settings: "hist";

swsh デフォルトの字形を対応するスワッシュ字形に置き換え

font-feature-settings: "swsh";
/*複数のスワッシュ字形が存在する場合、対応する番号を入れます*/
font-feature-settings: "swsh" 3;

salt デフォルトの字形からデザインのバリエーション字形に置き換え

font-feature-settings: "salt";
/*複数のバリエーション字形が存在する場合、対応する番号を入れます*/
font-feature-settings: "salt" 3;

ss## 字形をデザインのバリエーションの「セット」に置き換え。##は 01〜20 の数字
```
font-feature-settings: "ss01";
```

ornm ある特定の文字をオーナメント（装飾的な記号）に置き換え

font-feature-settings: "ornm";
/*複数のオーナメント字形が存在する場合、対応する番号を入れます*/
font-feature-settings: "ornm" 3;

nalt アノテーション（丸付き数字や反転文字など）字形に置き換え

font-feature-settings: "nalt";
/*複数のアノテーション字形が存在する場合、対応する番号を入れます*/
font-feature-settings: "nalt" 3;

font-variant-east-asian

jp78 JIS X 0208-1978（旧JIS）の字形で表示

font-variant-east-asian: jis78;
font-feature-settings: "jp78";

jp83 JIS X 0208-1983（新JIS）の字形で表示

font-variant-east-asian: jis83;
font-feature-settings: "jp83";

jp90 JIS X 0208-1990 の字形で表示

font-variant-east-asian: jis90;
font-feature-settings: "jp90";

jp04 JIS X 0213-2004 の字形で表示

font-variant-east-asian: jis04;
font-feature-settings: "jp04";

smpl 中国語の簡体字の字形で表示

font-variant-east-asian: simplified;
font-feature-settings: "smpl";

trad 中国語簡体字・日本語の漢字を、対応する旧字体に置き換え
```
font-variant-east-asian: traditional;
font-feature-settings: "trad";
```
fwid 英数字を全角の文字（等幅全角字形）に置き換えて表示
```
font-variant-east-asian: full-width;
font-feature-settings: "fwid";
```
pwid 可変幅（プロポーショナル）フォントで表示 = カナを詰める（句読点は全角のまま）
```
font-variant-east-asian: proportional-width;
font-feature-settings: "pwid";
```
(未指定)昨日、きょう、あした

(font-feature-settings: "pwid")昨日、きょう、あした

ruby ルビ（ふりがな）の字形で表示

font-variant-east-asian: ruby;
font-feature-settings: "ruby";

font-variantで指定できず、font-feature-settingsプロパティでしか指定できない値もあります。いくつかピックアップしておきます。

halt 字幅半角メトリクス。句読点などの全角設計の字体を、半角（0.5 em）の幅に収まるように再調整。
font-variant-east-asian: proportional-width（pwid）との違いは、句読点が詰まること（カナは全角のまま）・字体の置き換えではないことです。
```
font-feature-settings: "halt";
```
(未指定)昨日、今日、あした

(font-feature-settings: "halt")昨日、今日、あした
palt プロポーショナルメトリクス。全角設計の字体を、プロポ−ショナルな幅に収まるように再調整。
font-variant-east-asian: proportional-width（pwid）との違いは、カナも句読点も両方とも詰まること・字体の置き換えではないことです。
```
font-feature-settings: "palt";
```
(未指定)昨日、今日、あした

(font-feature-settings: "palt")昨日、今日、あした
pkna プロポーショナルかな。カナのみをプロポ−ショナル字形に置き換えます。
font-variant-east-asian: proportional-width（pwid）との違いは、日本語の「カナ」のみなこと（pwid はラテン文字にも使えます）
```
font-feature-settings: "pkna";
```
(未指定)昨日、今日、あした

(font-feature-settings: "pkna")昨日、今日、あした
hwid 等幅半角字形。カナや数字などを、半角（0.5 em）の字体に置き換えます。
```
font-feature-settings: "hwid";
```
(未指定)本日、キャベツ1個200円

(font-feature-settings: "hwid")本日、キャベツ1個200円
twid 等幅三分字形。数字などを、1/3em の字体に置き換えます。
```
font-feature-settings: "twid";
```
(未指定)バナナは5本で100円

(font-feature-settings: "twid")バナナは5本で100円
qwid 等幅四分字形。数字などを、1/4em の字体に置き換えます。
```
font-feature-settings: "qwid";
```
(未指定)イチゴ2パック1200円

(font-feature-settings: "qwid")イチゴ2パック1200円

OpenType機能タグ値のアルファベット順リスト

Microsoft が用意している OpenType機能タグ値のアルファベット順リストです。
タグ値はたった4文字ですが、間違えたら無効なので、確認したい時に便利です。
（クリックで別ウィンドウで開きます）

次回予告

フォント関連のプロパティは、今回で一応ひと段落です。

次回は、これまで何度か登場している vertical-alignプロパティについて。
これは要素の縦方向の整列の仕方を指定するプロパティです。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-07-03（Wed）│
投稿日：2018-05-30（Wed）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿