ほんっとにはじめてのHTML5とCSS3：【30-5】文字の代替えを指定する font-variant-alternates

【30-5】文字の代替えを指定する font-variant-alternates

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

今回は、font-variant-alternatesプロパティを見てみましょう。
「alternates（オルタネイト）」は「代替え」と言う意味。使用しているフォントが複数の代替え字形を持っていたら、それに置き換えることができるプロパティです。

このプロパティは、CSSの @-規則（At-rules）の１つの @font-feature-values を一緒に使って、OpenTypeフォント特有の feature-value-name（機能値名）を指定します。

この font-variant-alternatesプロパティは、対応ブラウザも少なく、W3Cの仕様書の今の段階で「Features at risk（リスクのある機能）」の中に入っているので、勧告時にかなり変更されるかもしれません。（2018年5月記）
@font-feature-values の関数（stylistic()、styleset()、character-variant()、swash()、ornaments()、annotation()）に対応するブラウザが少ないんだそうです。

font-variantショートハンドプロパティ で、この font-variant-alternatesプロパティの値もまとめられるので、無視するわけにも行かず、とにかく記事にしました。

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font-variant-alternates - CSS | MDN
・@-規則 - CSS | MDN

font-variant-alternatesプロパティの値

font-variant-alternatesプロパティの値
キーワード	normal：デフォルト値。代替えグリフを使わない。 historical-forms、stylistic()、styleset()、character-variant()、swash()、ornaments()、annotation() ＊値の（）内には、@font-feature-values で特定した OpenTypeフォントの機能値の名前を入れます。
グローバル値	font-variant-alternates: inherit; 親の値を継承（コレ書かなくても継承するけど） font-variant-alternates: initial; 継承した親の値を解消しデフォルト値に戻す font-variant-alternates: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

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

（）を付けるキーワード stylistic()、styleset()、character-variant()、swash()、ornaments()、annotation() の（）内には、@font-feature-values で指定した OpenTypeフォントの機能値の名前を入れるという、ちょっと複雑な使い方をします。

それぞれのキーワードは、以下の意味があります。
＊キーワードの後のブルーの（）内は OpenType機能タグ値（feature-tag-value）です。
（OpenType機能タグ値については、【31】OpenType機能を直接指定できる font-feature-settingsプロパティをご覧ください）

normal

通常の字形で表示。代替えグリフを使わない。

font-variant-alternates: normal

historical-forms（hist）

古典的な字形による表示を可能にします。

font-variant-alternates: historical-forms

（下図は W3C の仕様書のものです）

stylistic()（"salt" 1, "salt" 2 ...）

個々の字形をデフォルトの字形からデザインのバリエーションに置き換えます。
（下図は W3C の仕様書のものです）

styleset()（ss01 ~ ss20）

字形をデザインのバリエーションの「セット」に置き換えます。

@font-feature-values Mars Serif {
  @styleset {
    alt-g: 1;        /* ss01 = 1 */
    curly-quotes: 3; /* ss03 = 1 */
    code: 4 5;       /* ss04 = 1, ss05 = 1 */
  }
}
p.codeblock {
  font-variant-alternates: styleset(curly-quotes, code); /* ss03 = 1, ss04 = 1, ss05 = 1 */
  }

（下図は W3C の仕様書のもの。上のソースコードとは無関係です）

character-variant()（cv01 ~ cv99）

ある特定の文字をデフォルトの字形からデザインのバリエーションに置き換えます。

/*ギリシャ語の字体で 代替グリフを利用している例です */
@font-feature-values MM Greek {
  @character-variant { alpha-2: 1 2;   } /* cv01 = 2 */
  @character-variant { beta-3 : 2 3;   } /* cv02 = 3 */
  @character-variant { gamma  : 12;    } /* cv12 = 1 */
  @character-variant { zeta   : 20 3;  } /* cv20 = 3 */
  @character-variant { zeta-2 : 20 2;  } /* cv20 = 2 */
}
#title {
  font-variant-alternates: character-variant(beta-3, gamma);
}

swash()（"swsh" 1, "swsh" 2 ... または "cswh" 1, "cswh" 2 ..）

スワッシュがあるならそれに置き換えます。
swash（スワッシュ）とは「巻きひげ」という意味で、装飾的な字形です。

@font-feature-values Jupiter Sans {
  @swash {
    delicate: 1;
    flowing: 2;
  }
}
h2 { font-family: Jupiter Sans, sans-serif; }
h2:first-letter { font-variant-alternates: swash(flowing); }
/* h2の最初の文字にスワッシュを使っています*/

（下図は W3C の仕様書のものです）

ornaments()（"ornm" 1, "ornm" 2 ...）

ある特定の文字をオーナメント（装飾的な記号）に置き換えます。
（下図は W3C の仕様書のものです）

annotation()（"nalt" 1, "nalt" 2 ...）

アノテーション（丸付き数字や反転文字（黒丸の中に白抜き文字とか）など）字形に置き換えます。

@font-feature-values Taisho Gothic {
  @annotation { boxed: 1; circled: 4; }
}
@font-feature-values Otaru Kisa {
  @annotation { circled: 1; black-boxed: 3; }
}
h3.title {
  /*2種類のフォントに対して丸付き文字が指定されています*/
  font-family: Taisho Gothic, Otaru Kisa;
  font-variant-alternates: annotation(circled);
}

（下図は W3C の仕様書のものです）

次回予告

他の字形に置き換えるのは font-feature-settingsプロパティでもできるし、日本語フォントで装飾的な代替え字体があるものが少ない（っていうか無い？）ので、あまりピンと来ない font-variant-alternatesプロパティでした。
（手持ちのフォントにスワッシュなどの代替え字体を含むものが無く、検証のしようがなくて、この記事は W3C仕様書のコピペのようになっちゃいました。）

次回は font-variant-east-asianプロパティを使ってみます。
これは、日本や中国などの東アジア圏のテキストのためのもの。漢字を旧字体にしたり、カナ詰め（カナだけ詰める）ができたり、こっちはとっても使えます！（笑）

関連記事

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

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

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

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