このページでは、個々の OpenType 機能について、各機能の具体的な例と共に説明します。Typekit で OpenType 機能を有効にして CSS で使用する方法の概要については、ヘルプドキュメントの CSS での OpenType 機能の使用を参照してください。

合字

文字

数値

デザインのセット

東アジア言語の活字

幅の異なる字形

文化的に異なる字形

縦書き機能

その他

一般的な合字/標準合字(liga)

合字の実際の表示例(Warnock Pro で設定)

liga CSS の適用例

この機能は、一連の字形を「合字」と呼ばれる 1 つの字形に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、通常の状況ではデザイナーやベンダーの審査に使用するような合字が挿入されます。

この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari(Mac または iOS)では無効にできません。Chrome と Firefox の一部のバージョンでは、スペースを含む合字で問題が発生します。ブラウザーサポート詳細を参照してください。

.class {
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

font-variant プロパティまたは font-variant-ligatures サブプロパティでこの機能を有効にするには、common-ligatures 値を使用します。この指定により、一般的な合字と前後関係に依存する合字の両方が有効になります。前後関係に依存する字形と同様に、前後関係に依存する合字には、特定の状況でのみ代替字形を適用する条件ロジックが組み込まれます。font-feature-settings で同じ効果を得るには、「liga」と「clig」の両方の機能タグを使用します。複数の OpenType 機能を使用するための構文も参照してください。

.class {
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
  font-feature-settings: "liga" 0, "clig" 0;
}

この機能を無効にするには、no-common-ligatures 値を使用し、font-feature-settings の数値インデックスに 0 を指定します。

前後関係に依存する字形(calt)

前後関係に依存する字形の実際の表示例(Caflisch Script Pro で設定)

calt CSS の適用例

この機能は特定の状況で、デフォルトの字形を、互いにより組み合わせやすい代替形式に置き換えます。合字と同様に(ただし、厳密には合字機能ではない)、前後関係に依存する字形は、一般的に字形の形を周囲に合わせるために使用されます。

前後関係に依存する字形機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari(Mac または iOS)では無効にできません。ブラウザーサポート詳細を参照してください。

.class {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

font-variant プロパティまたは font-variant-ligatures サブプロパティでこの機能を有効にするには、contextual 値を使用します。font-feature-settings で同じ効果を得るには、「calt」機能タグを使用します。

.class {
    font-variant-ligatures: no-contextual;
    -moz-font-feature-settings: "calt" 0;
    -webkit-font-feature-settings: "calt" 0;
    font-feature-settings: "calt" 0;
}

この機能を無効にするには、no-contextual 値を使用し、font-feature-settings の数値インデックスに 0 を指定します。

任意の合字(dlig)

任意の合字の実際の表示例(Warnock Pro で設定)

dlig CSS の適用例

この機能は、一連の字形を 1 つの字形(合字)に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、特殊な効果を得るために使用できる合字が挿入されます。

.class {
  font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "dlig";
  -webkit-font-feature-settings: "dlig";
  font-feature-settings: "dlig";
}

任意の合字機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-ligatures サブプロパティでこの機能を有効にするには、discretionary-ligatures 値を使用します。font-feature-settings で同じ効果を得るには、「dlig」機能タグを使用します。

スモールキャップス(smcp)

スモールキャップスの実際の表示例(Warnock Pro で設定)

smcp CSS の適用例

この機能は、小文字をスモールキャップスに置き換えます。

.class {
  font-variant-caps: small-caps;
  -moz-font-feature-settings: "smcp";
  -webkit-font-feature-settings: "smcp";
  font-feature-settings: "smcp";
}

スモールキャップス機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-caps サブプロパティでこの機能を有効にするには、small-caps 値を使用します。font-feature-settings で同じ効果を得るには、「smcp」機能タグを使用します。

一部のフォントでは、スモールキャップス機能に別の形式も含まれています。OpenType 仕様によれば、smcp OpenType 機能には「オールドスタイル数字などのスモールキャップスに関連する形式が含まれる場合がある」ということです。

大文字のスモールキャップス(c2sc)

大文字のスモールキャップスの実際の表示例(Warnock Pro で設定)

c2sc CSS の適用例

この機能は、大文字をスモールキャップスに置き換えます。

.class {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}

大文字のスモールキャップス機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-caps サブプロパティでこの機能を有効にするには、all-small-caps 値を使用します。この指定により、大文字と小文字の両方がスモールキャップスに置き換わります。大文字にのみスモールキャップスを適用するケースはほとんどないので、この振る舞いは合理的です。font-feature-settings で同じ効果を得るには、「c2sc」と「smcp」の両方の機能タグを使用します。複数の OpenType 機能を使用するための構文も参照してください。

スワッシュ字形(swsh)

スワッシュ字形の実際の表示例(Bickham Script Pro 3 で設定)

swsh CSS の適用例

この機能は、デフォルトの文字字形を対応するスワッシュ字形に置き換えます。

.class {
  -moz-font-feature-settings: "swsh";
  -webkit-font-feature-settings: "swsh";
  font-feature-settings: "swsh";
}

スワッシュ字形機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-feature-settings でこの機能を有効にするには、「swsh」機能タグを使用します。1 つの文字に複数のスワッシュ字形が存在する場合があります。他のスワッシュ字形にアクセスするには、値に対して数値インデックスを追加します。

.class {
  -moz-font-feature-settings: "swsh" 2;
  -webkit-font-feature-settings: "swsh" 2;
  font-feature-settings: "swsh" 2;
}

このコードでは、フォントに 2 つ目のスワッシュ字形が存在する場合に、それが有効になります。ご想像のとおり、1 つ目のコード例にあるような "swsh" という値は、"swsh" 1 という値と同等です。

ここでは、font-varian プロパティについては取り上げません。このプロパティの「名前付き」の値(swash (flowing) など)は、CSS の font-feature-value 定義によってスワッシュの数値インデックスにマッピングされますが、この定義はまだ主要ブラウザーでサポートされていないからです。

デザインのバリエーション(salt)

スワッシュ字形の実際の表示例(Bree で設定)

salt CSS の適用例

この機能は、デフォルトの文字字形をデザインのバリエーションに置き換えます。デザインのセット(ss##)も参照してください。

.class {
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
}

デザインのバリエーション機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-feature-settings でこの機能を有効にするには、「salt」機能タグを使用します。1 つの文字に複数のデザインのバリエーションが存在する場合があります。他のデザインのバリエーションにアクセスするには、値に対して数値インデックスを追加します。

.class {
  -moz-font-feature-settings: "salt" 2;
  -webkit-font-feature-settings: "salt" 2;
  font-feature-settings: "salt" 2;
}

このコードでは、フォントに 2 つ目のデザインのバリエーションが存在する場合に、それが有効になります。ご想像のとおり、1 つ目のコード例にあるような "salt" という値は、"salt" 1 という値と同等です。

ここでは、font-variant プロパティについては取り上げません。このプロパティの「名前付き」の値(適当な例はありません)は、CSS の font-feature-value 定義によってデザインのバリエーションの数値インデックスにマッピングされますが、この定義はまだ主要ブラウザーでサポートされていないからです。

ライニング数字(lnum)

ライニング数字の実際の表示例(Warnock Pro で設定)

lnum CSS の適用例

この機能は、数値字形をデフォルトまたはオールドスタイル数字からライニング数字に変換します。一部のフォントでは、ライニング数字がデフォルトの数字スタイルとして含まれています。その場合、この機能を有効にしても、字形のスタイルに影響がないように見えます。

.class {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

ライニング数字機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-numeric サブプロパティでこの機能を有効にするには、lining-nums 値を使用します。font-feature-settings で同じ効果を得るには、「lnum」機能タグを使用します。

オールドスタイル数字(onum)

オールドスタイル数字の実際の表示例(Warnock Pro で設定)

onum CSS の適用例

この機能は、数値字形をデフォルトまたはライニング数字からオールドスタイル数字に変換します。一部のフォントでは、オールドスタイル数字がデフォルトの数字スタイルとして含まれています。その場合、この機能を有効にしても、字形のスタイルに影響がないように見えます。

.class {
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}

オールドスタイル数字機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-numeric サブプロパティでこの機能を有効にするには、oldstyle-nums 値を使用します。font-feature-settings で同じ効果を得るには、「onum」機能タグを使用します。

プロポーショナル数字(pnum)

プロポーショナル数字の実際の表示例(Hypatia Sans Pro で設定)

pnum CSS の適用例

この機能は、均等な幅(等幅)の数値字形セットを、対応する字形固有の(プロポーショナルな)幅の字形セットに置き換えます。一部のフォントでは、プロポーショナル数字がデフォルトで含まれています。その場合、この機能を有効にしても、字形の幅に影響がないように見えます。

.class {
  font-variant-numeric: proportional-nums;
  -moz-font-feature-settings: "pnum";
  -webkit-font-feature-settings: "pnum";
  font-feature-settings: "pnum";
}

プロポーショナル数字機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-numeric サブプロパティでこの機能を有効にするには、proportional-nums 値を使用します。font-feature-settings で同じ効果を得るには、「pnum」機能タグを使用します。

等幅数字(tnum)

等幅数字の実際の表示例(Hypatia Sans Pro で設定)

tnum CSS の適用例

この機能は、字形固有の(プロポーショナルな)幅の数値字形セットを、対応する均等な幅(等幅)の字形セットに置き換えます。一部のフォントでは、等幅数字がデフォルトで含まれています。その場合、この機能を有効にしても、字形の幅に影響がないように見えます。

.class {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

等幅数字機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-numeric サブプロパティでこの機能を有効にするには、tabular-nums 値を使用します。font-feature-settings で同じ効果を得るには、「tnum」機能タグを使用します。

分数(frac)

分数の実際の表示例(Warnock Pro で設定)

frac CSS の適用例

この機能は、スラッシュで区切られた数字を、一般的な(斜線による)分数に置き換えます。

.class {
  font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}

分数機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-numeric サブプロパティでこの機能を有効にするには、diagonal-fractions 値を使用します。font-feature-settings で同じ効果を得るには、「frac」機能タグを使用します。

上付き序数表記(ordn)

上付き序数表記の実際の表示例(Warnock Pro で設定)

ordn CSS の適用例

この機能は、デフォルトのアルファベット字形を、対応する上付き序数表記(数字の後で使用)に置き換えます。

.class {
  font-variant-numeric: ordinal;
  -moz-font-feature-settings: "ordn";
  -webkit-font-feature-settings: "ordn";
  font-feature-settings: "ordn";
}

上付き序数表記機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-numeric サブプロパティでこの機能を有効にするには、ordinal 値を使用します。font-feature-settings で同じ効果を得るには、「ordn」機能タグを使用します。

字形の置き換えは、数字の後で起きるとは限りません。 OpenType 仕様によれば、「数字の後というルールの例外として、ナンバー記号(「No」、U+2116)がある。これは、実際は合字の代替であるが、上付き序数表記機能の使用に適している」ということです。

デザインのセット(ss##)

デザインのセットの実際の表示例(Hypatia Sans Pro で設定)

デザインのセット CSS の適用例

この機能は、デフォルトの文字字形のセットをデザインのバリエーションに置き換えます。デザインのセット内の字形は、見た目を調和させる、特定の方法で互いに接触させるなど、連携させる目的でデザインされています。デザインのバリエーション(salt)も参照してください。これは、個々の字形に関するデザインのバリエーションを提供するようにデザインされています。

.class {
  -moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}

デザインのセット機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-feature-settings でこの機能を有効にするには、「ss##」機能タグを使用します。この「##」は、01 から 20 までの 2 桁の数値です。フォントは、完全に任意でカスタムな方法でデザインのセットを使用する点に注意してください。例えば、2 種類のフォントが同じ機能(ss01 など)を使用してまったく異なる字形セットを置き換えることや、特定のフォントが ss01 と ss03 を使用して字形セットを置き換えるけれども ss02 を無視することがあります。一部のフォントベンダーは、機能の構成に関するドキュメントを提供しています。

ここでは、font-variant プロパティについては取り上げません。このプロパティの「名前付き」の値(styleset(sharp-serifs) など)は、CSS の font-feature-value 定義によってデザインのセットの数値インデックスにマッピングされますが、この定義はまだ主要ブラウザーでサポートされていないからです。

プロポーショナル字形(pwid)

プロポーショナル字形の実際の表示例(Kozuka Mincho Pr6n で設定)

pwid CSS の適用例

この機能は、均等な幅(通常は全角または半角の長さ)の字形セットを、スペースがプロポーショナルに配置された字形に置き換えます。プロポーショナルな字形は、CJKV フォントのラテン文字でよく使用されますが、日本語フォントのかなにも使用できます(出典)。

.class {
  font-variant-east-asian: proportional-width;
  -moz-font-feature-settings: "pwid";
  -webkit-font-feature-settings: "pwid";
  font-feature-settings: "pwid";
}

プロポーショナル字形の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。font-variant プロパティまたは font-variant-east-asian サブプロパティでこの機能を有効にするには、proportional-width 値を使用します。font-feature-settings で同じ効果を得るには、「pwid」機能タグを使用します。

プロポーショナルメトリクス(palt)

プロポーショナルメトリクスの実際の表示例(Source Han Sans で設定):

palt CSS の適用例

この機能は、全角(1 em)の幅で設定するようにデザインされた字形のスペースを、個々の(プロポーショナルな)横の幅に収まるように再調整します。pwid と異なる点は、新しい字形に置き換えられないことです(GSUB ではなく GPOS 機能)。等幅字形が好まれる場合もありますが、単に字形をスペース内に収めて縦書き設定で回転しないようにしたい場合もあります(プロポーショナルなスペース用にデザインされたラテン字形は回転します)(出典)。

.class {
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

プロポーショナルメトリクスの機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「palt」機能タグを使用することです。

プロポーショナルかな(pkna)

プロポーショナルかなの実際の表示例(Kozuka Mincho Pr6n で設定)

pkna CSS の適用例

この機能は、均等な幅(全角または半角の長さ)の「かな」および「かな」関連の字形セットを、プロポーショナル字形に置き換えます。プロポーショナル字形の機能に似ていますが、「かな」のみに影響します(出典)。

.class {
  -moz-font-feature-settings: "pkna";
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
}

プロポーショナルかなの機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「pkna」機能タグを使用することです。

等幅全角字形(fwid)

等幅全角字形の実際の表示例(Kozuka Mincho Pr6n で設定)

fwid CSS の適用例

この機能は、他の幅の字形セットを、全角(通常は 1 em)の幅に設定された字形に置き換えます。CJKV フォントでは、「Lower ASCII」と呼ばれるラテン文字や各種シンボル文字が含まれる場合があります。欧文フォントでは、スペースがプロポーショナルに配置された字形を等幅字形(一般的に 0.6 em 幅に設定)に置き換えます(出典)。

.class {
  font-variant-east-asian: full-width;
  -moz-font-feature-settings: "fwid";
  -webkit-font-feature-settings: "fwid";
  font-feature-settings: "fwid";
}

等幅全角字形の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。font-variant プロパティまたは font-variant-east-asian サブプロパティでこの機能を有効にするには、full-width 値を使用します。font-feature-settings で同じ効果を得るには、「fwid」機能タグを使用します。

等幅半角字形(hwid)

等幅半角字形の実際の表示例(Kozuka Mincho Pr6n で設定)

hwid CSS の適用例

この機能は、プロポーショナル字形または 0.5 em 以外の固定幅の字形を、半角(0.5 em または 1 en)の幅の字形に置き換えます。多くの CJKV フォントには、複数の幅が設定された字形が含まれていますが、この機能では半角の字形が選択されます。古いデスクトップドキュメントとの互換性を維持するなど、この動作が望まれる状況は多くあります(出典)。

.class {
  -moz-font-feature-settings: "hwid";
  -webkit-font-feature-settings: "hwid";
  font-feature-settings: "hwid";
}

等幅半角字形の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「hwid」機能タグを使用することです。

字幅半角メトリクス(halt)

字幅半角メトリクスの実際の表示例(Kozuka Mincho Pr6n で設定)

halt CSS の適用例

この機能は、全角(1 em)の幅で設定するようにデザインされた字形のスペースを、半角(0.5 em)の幅に収まるように再調整します。hwid と異なる点は、新しい字形に置き換えられないことです(出典)。

.class {
  -moz-font-feature-settings: "halt";
  -webkit-font-feature-settings: "halt";
  font-feature-settings: "halt";
}

字幅半角メトリクスの機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「halt」機能タグを使用することです。

等幅三分字形(twid)

等幅三分字形の実際の表示例(Kozuka Mincho Pr6n で設定)

twid CSS の適用例

この機能は、他の幅の字形を、1/3 em の幅に設定された字形に置き換えます。通常、関連する文字は数字と一部の句読点字形です(出典)。

.class {
  -moz-font-feature-settings: "twid";
  -webkit-font-feature-settings: "twid";
  font-feature-settings: "twid";
}

等幅三分字形の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「twid」機能タグを使用することです。

等幅四分字形(qwid)

等幅四分字形の実際の表示例(Kozuka Mincho Pr6n で設定)

qwid CSS の適用例

この機能は、他の幅の字形を、0.25 em(0.5 en)の幅に設定された字形に置き換えます。通常、関連する文字は数字と一部の句読点字形です(出典)。

.class {
  -moz-font-feature-settings: "qwid";
  -webkit-font-feature-settings: "qwid";
  font-feature-settings: "qwid";
}

等幅四分字形の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「qwid」機能タグを使用することです。

JIS78 字形(jp78)

JIS78 字形の実際の表示例(Kozuka Mincho Pr6n で設定)

jp78 CSS の適用例

この機能は、デフォルト(JIS90)の日本語字形を、対応する JIS C 6226-1978(JIS78)規格の字形に置き換えます(出典)。

.class {
  font-variant-east-asian: jis78;
  -moz-font-feature-settings: "jp78";
  -webkit-font-feature-settings: "jp78";
  font-feature-settings: "jp78";
}

JIS78 字形の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。font-variant プロパティまたは font-variant-east-asian サブプロパティでこの機能を有効にするには、jis78 値を使用します。font-feature-settings で同じ効果を得るには、「jp78」機能タグを使用します。

JIS83 字形(jp83)

JIS83 字形の実際の表示例(Kozuka Mincho Pr6n で設定)

jp83 CSS の適用例

この機能は、デフォルト(JIS90)の日本語字形を、対応する JIS X 0208-1983(JIS83)規格の字形に置き換えます(出典)。

.class {
  font-variant-east-asian: jis83;
  -moz-font-feature-settings: "jp83";
  -webkit-font-feature-settings: "jp83";
  font-feature-settings: "jp83";
}

JIS83 字形の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。font-variant プロパティまたは font-variant-east-asian サブプロパティでこの機能を有効にするには、jis83 値を使用します。font-feature-settings で同じ効果を得るには、「jp83」機能タグを使用します。

JIS90 字形(jp90)

JIS90 字形の実際の表示例(Kozuka Mincho Pr6n で設定)

jp90 CSS の適用例

この機能は、JIS78 規格または JIS83 規格の日本語字形を、対応する JIS X 0208-1990(JIS90)規格の字形に置き換えます(出典)。

.class {
  font-variant-east-asian: jis90;
  -moz-font-feature-settings: "jp90";
  -webkit-font-feature-settings: "jp90";
  font-feature-settings: "jp90";
}

JIS90 字形の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。font-variant プロパティまたは font-variant-east-asian サブプロパティでこの機能を有効にするには、jis90 値を使用します。font-feature-settings で同じ効果を得るには、「jp90」機能タグを使用します。

JIS2004 字形(jp04)

JIS2004 字形の実際の表示例(Kozuka Mincho Pro で設定)

jp04 CSS の適用例

日本の国語審議会(NLC)により、多数の JIS 文字について新しい字形の形が定義され、それが新しい原形として JIS X 0213:2004 に取り込まれました。「jp04」機能は「nlck」機能のサブセットであり、JIS X 0213:2004 との整合性を維持する形で、これらの原形字体にアクセスするために使用します(出典)。

.class {
  font-variant-east-asian: jis04;
  -moz-font-feature-settings: "jp04";
  -webkit-font-feature-settings: "jp04";
  font-feature-settings: "jp04";
}

JIS2004 字形の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。font-variant プロパティまたは font-variant-east-asian サブプロパティでこの機能を有効にするには、jis04 値を使用します。font-feature-settings で同じ効果を得るには、「jp04」機能タグを使用します。

旧字体(trad)

旧字体の実際の表示例(Kozuka Mincho Pr6n で設定)

trad CSS の適用例

中国語簡体字または日本語の漢字を、対応する旧字体に置き換えます(出典)。

.class {
  font-variant-east-asian: traditional;
  -moz-font-feature-settings: "trad";
  -webkit-font-feature-settings: "trad";
  font-feature-settings: "trad";
}

旧字体の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。font-variant プロパティまたは font-variant-east-asian サブプロパティでこの機能を有効にするには、traditional 値を使用します。font-feature-settings で同じ効果を得るには、「trad」機能タグを使用します。

ルビ用字形(ruby)

ルビ用字形の実際の表示例(Kozuka Mincho Pr6n で設定)

ruby CSS の適用例

日本語の製版では、読み手がよく知らない漢字の意味を明確にするために、小さなかな字形(一般的には上付き文字)を使用することがよくあります。このようなかな文字は「ルビ」と呼ばれます(4 ポイントの活字に対する昔の製版用語がその由来です)。この機能は、こうした用途でデザインされたフォント内の字形を識別し、デフォルトのデザインの代わりに使用します(出典)。

.class {
  font-variant-east-asian: ruby;
  -moz-font-feature-settings: "ruby";
  -webkit-font-feature-settings: "ruby";
  font-feature-settings: "ruby";
}

ルビ用字形の機能は、デフォルトで無効です。font-variant プロパティまたは font-variant-east-asian サブプロパティでこの機能を有効にするには、ruby 値を使用します。font-feature-settings で同じ効果を得るには、「ruby」機能タグを使用します。

上のサンプルコードでは、rt 要素によってスタイルを設定しています。 ルビ用テキストの適切なマークアップ方法については、W3C の HTML5 仕様の、テキストレベルの意味に関する節で説明されています。また、ルビ用テキストの位置とサイズはブラウザーやそのバージョンによって異なるため、ブラウザーのデフォルト値をスタイルシートのリセットによって無効にし、ルビ用テキストのサイズと位置を手動で設定することを検討してください。

横組み用かな(hkna)

横組み用かなの実際の表示例(Kozuka Mincho Pr6n で設定)

hkna CSS の適用例

この機能は、標準のかなを、横書き専用にデザインされた字形に置き換えます。これは、文字の収まり具合や発色までも向上させるタイポグラフィ最適化機能の 1 つです(出典)。

.class {
  -moz-font-feature-settings: "hkna";
  -webkit-font-feature-settings: "hkna";
  font-feature-settings: "hkna";
}

横組み用かなの機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「hkna」機能タグを使用することです。

印刷標準字体(nlck)

印刷標準字体の実際の表示例(Kozuka Mincho Pr6n で設定)

nlck CSS の適用例

日本の国語審議会(NLC)により、多数の JIS 文字について 2000 年に新しい字形の形が定義されました。「nlck」機能は、それらの字形にアクセスするために使用します(出典)。

.class {
  -moz-font-feature-settings: "nlck";
  -webkit-font-feature-settings: "nlck";
  font-feature-settings: "nlck";
}

印刷標準字体の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「nlck」機能タグを使用することです。

修飾字形(nalt)

修飾字形の実際の表示例(Kozuka Mincho Pr6n で設定)

nalt CSS の適用例

この機能は、デフォルトの字形を、様々な表記(塗りつぶしあり、または塗りつぶしなしの円、正方形、括弧、ひし形、角の丸い四角形など)に置き換えます。修飾字形が既に存在している場合もありますが、そのような場合でもユーザーは別の字形を使用できます(出典)。

.class {
  -moz-font-feature-settings: "nalt";
  -webkit-font-feature-settings: "nalt";
  font-feature-settings: "nalt";
}

修飾字形の機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「nalt」機能タグを使用することです。

イタリック(ital)

イタリックの実際の表示例(Kozuka Mincho Pr6n で設定)

ital CSS の適用例

一部のフォント(アドビの Pro 日本語フォントなど)では、1 つのフォントの一部の文字に欧文体とイタリック体の両方が含まれています。この機能は、欧文字形を対応するイタリック字形に置き換えます(出典)。

.class {
  -moz-font-feature-settings: "ital";
  -webkit-font-feature-settings: "ital";
  font-feature-settings: "ital";
}

イタリックの機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「ital」機能タグを使用することです。

注意:縦書き機能について

以下の OpenType 機能は、字形のスペースと位置を再調整することによって、縦方向のテキスト表示を改善するものです。ただし、ブラウザーでの縦方向テキストのサポートは限定的です。そのため、縦方向テキストがサポート対象ではなく正常に動作しない場合でもこれらの OpenType 機能がサポート対象であり正常に動作することはありますが、その場合にこれらの機能は意味を持ちません。

.class {
  direction: rtl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

ここでのサンプルコードは、W3C の CSS Writing Modes Level 3 Editor’s Draft と、こちらの David Storey による綿密な調査に基づいています。具体的な表示方法を確認できますが、ブラウザーによるサポートが現時点で追いついていない状況です。上記のコードのテストを行った際には、書き込みモードは Chrome でのみ動作しました。

縦組みペアカーニング(vkrn)

この機能は、一般的には光学的な観点から字形間のスペースが一定になるように、字形間のスペースを調整します。入念にデザインされた書体は、全体的に字形間のスペースが一定ですが、一部の字形の組み合わせでは、読みやすさを改善するための調整が必要になります。縦方向の標準的な調整ができるほか、この機能ではデバイステーブルを介して、サイズによって異なるカーニングデータを指定することができます。また、テキストの X 方向での「クロスストリーム」カーニングを指定し、この詳細調整とは関係なく字形の位置を調整できます。この機能は、3 つ以上の字形の列に対して適用できます。また、この機能は等幅フォントでは使用されません。さらに、この機能は、縦方向に設定されたテキストにのみ適用されます(出典)。

.class {
  -moz-font-feature-settings: "vkrn", "vpal";
  -webkit-font-feature-settings: "vkrn", "vpal";
  font-feature-settings: "vkrn", "vpal";
}

縦組みペアカーニングの機能はデフォルトで無効であり、IE、および Mac OS または iOS の Safari のどのバージョンでもサポートされていません。また、この機能は Firefox ではサポートされていますが、縦書きテキストはサポートされていないので、事実上この機能もサポートされていないことになります。この機能を有効にする唯一の方法は、font-feature-settings で「vkrn」機能タグを使用することです。vkrn を有効にした場合、vpal も(存在する場合は)有効にする必要があります。複数の OpenType 機能を使用するための構文および注意:縦書き機能についても参照してください。

縦組み用字形(vert)

この機能は、縦書きモードの場合に、デフォルトの字形を縦書き用に調整された字形に置き換えます。ほとんどの CJKV 字形は、縦書きモードで設定された場合に縦に維持されますが、一部の字形はこの目的で別の形になります(通常は回転されるか、位置が変更されます)。この機能の対象となる字形は、通常ローエンドの DTP アプリケーションで回転される字形セットに対応します(出典)。

縦組み用字形の機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、IE または Firefox の全バージョンでは、デフォルトで無効です。また、Safari(Mac または iOS)では有効にできません。注意:縦書き機能についても参照してください。

.class {
  -moz-font-feature-settings: "vert";
  -webkit-font-feature-settings: "vert";
  font-feature-settings: "vert";
}

この縦組み用字形の機能を有効にする唯一の方法は、font-feature-settings で「vkrn」機能タグを使用することです。

縦組みプロポーショナルメトリクス(vpal)

この機能は、全角(1 em)の高さで設定するようにデザインされた字形のスペースを、個々の(プロポーショナルな)縦の高さに収まるように再調整します。valt と異なる点は、新しい字形に置き換えられないことです(GSUB ではなく GPOS 機能)。等幅字形が好まれる場合もありますが、単に字形をスペース内に収めたい場合もあります(出典)。

.class {
  -moz-font-feature-settings: "vpal";
  -webkit-font-feature-settings: "vpal";
  font-feature-settings: "vpal";
}

縦組みプロポーショナルメトリクスの機能はデフォルトで無効であり、IE、および Mac OS または iOS の Safari のどのバージョンでもサポートされていません。また、この機能は Firefox ではサポートされていますが、縦書きテキストはサポートされていないので、事実上この機能もサポートされていないことになります。この機能を有効にする唯一の方法は、font-feature-settings で「vpal」機能タグを使用することです。注意:縦書き機能についても参照してください。

縦組み字幅半角メトリクス(vhal)

この機能は、全角(1 em)の高さで設定するようにデザインされた字形のスペースを、半角(0.5 em)の高さに収まるように再調整します(出典)。

.class {
  -moz-font-feature-settings: "vhal";
  -webkit-font-feature-settings: "vhal";
  font-feature-settings: "vhal";
}

縦組み字幅半角メトリクスの機能はデフォルトで無効であり、IE、Firefox および Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「vhal」機能タグを使用することです。注意:縦書き機能についても参照してください。

縦組み用かな(vkna)

この機能は、標準のかなを、縦書き専用にデザインされた字形に置き換えます。これは、文字の収まり具合や発色までも向上させるタイポグラフィ最適化機能の 1 つです。hkna も参照してください(出典)。

.class {
  -moz-font-feature-settings: "vkna";
  -webkit-font-feature-settings: "vkna";
  font-feature-settings: "vkna";
}

縦組み用かなの機能はデフォルトで無効であり、Mac OS または iOS の Safari のどのバージョンでもサポートされていません。この機能を有効にする唯一の方法は、font-feature-settings で「vkna」機能タグを使用することです。注意:縦書き機能についても参照してください。

カーニング(kern)

カーニングの実際の表示例(Source Sans Pro で設定)

kern CSS の適用例

この機能は、一般的には光学的な観点から字形間のスペースが一定になるように、字形間のスペースを調整します。入念にデザインされた書体は、全体的に字形間のスペースが一定ですが、一部の字形の組み合わせでは、読みやすさを改善するための調整が必要になります。この機能は、3 つ以上の字形の列に対して適用できます。また、この機能は等幅フォントでは使用されません。さらに、この機能は、縦方向に設定されたテキストには適用されません(出典)。

.class {
  font-kerning: normal;
  -moz-font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

カーニングの機能はデフォルトで無効ですが、多くの場合に有効にすることが重要です。「ブラウザーサポート詳細」を参照してください。font-kerning プロパティでこの機能を有効にするには、normal 値を使用します。font-feature-settings で同じ効果を得るには、「kern」機能タグを使用します。

字体組版/分解(ccmp)

字体組版/分解の実際の表示例(Source Han Sans で設定):

ccmp CSS の適用例

字形の数を最小限に抑えるために、1 つの文字を 2 つの字形に分解することが望ましい場合があります。また、2 つの文字を 1 つの字形に組版して字形を処理しやすくすることが望ましい場合もあります。この機能は、そのような組版や分解を許可するものです。この機能は、処理される最初の機能として設定する必要があり、呼び出されたときのみ処理する必要があります(出典)。

字体組版/分解の機能はデフォルトで有効です。そのため、CSS を記述しなくても機能します。ただし、この機能を確実に有効にするために注意すべき条件がいくつかあります。この機能は Chrome または Safari ではデフォルトで無効ですが、font-feature-settings の値を使用して有効にすることができます。

.class {
  -moz-font-feature-settings: "ccmp";
  -webkit-font-feature-settings: "ccmp";
  font-feature-settings: "ccmp";
}

字体組版/分解の機能を確実に有効にするには、「ccmp」機能タグを明示的に使用するか、またはその他の font-feature-settings の値を使用します。

ローカライズの字形(locl)

広い地域にわたって複数の言語で記述するための活字の多くは、特定の文字についてローカライズされた字形が開発されており、各文学コミュニティで使用されています。例えば、ブルガリアやセルビアのアルファベットは、ロシアの対応するアルファベットとは異なる文字が多く含まれ、互いのアルファベットも異なります。ローカライズの字形が「標準」の活字とほぼ変わらない場合もありますが、大きく異なる場合もあります。この機能は、ローカライズの字形をデフォルトの字形の代わりに使用できるようにします(出典)。

ローカライズの字形の機能はデフォルトで有効です。そのため、CSS を記述しなくても機能します。ただし、実際には Firefox でのみデフォルトで有効になり、Safari(Mac または iOS)および Android のすべてでサポートされていません。ブラウザーサポート詳細を参照してください。

.class {
  -moz-font-feature-settings: "locl";
  -webkit-font-feature-settings: "locl";
  font-feature-settings: "locl";
}

ローカライズの字形の機能を確実に有効にするには、「locl」機能タグを明示的に使用します。

上付き文字(sups)

上付き文字の実際の表示例(Hypatia Sans Pro で設定)

sups CSS の適用例

この機能は、(主に脚注を示す目的で)ライニング数字またはオールドスタイル数字を上付き数字に置き換え、(主にフランス式の略称を示す目的で)小文字を上付き文字に置き換えます。

.class {
  font-variant-position: super;
  -moz-font-feature-settings: "sups";
  -webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}

上付き文字機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-position サブプロパティでこの機能を有効にするには、super 値を使用します。font-feature-settings で同じ効果を得るには、「sups」機能タグを使用します。

下付き文字(subs)

下付き文字の実際の表示例(Warnock Pro で設定)

subs CSS の適用例

この機能は、デフォルトの字形を下付き字形に置き換えます。または、文字を適切に配置するために、代替字形と位置調整を組み合わせることができます。

.class {
  font-variant-position: sub;
  -moz-font-feature-settings: "subs";
  -webkit-font-feature-settings: "subs";
  font-feature-settings: "subs";
}

下付き文字機能は、デフォルトで無効ですブラウザーサポート詳細を参照してください。

font-variant プロパティまたは font-variant-position サブプロパティでこの機能を有効にするには、sub 値を使用します。font-feature-settings で同じ効果を得るには、「subs」機能タグを使用します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー