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

最終更新日:2018年05月30日  (初回投稿日:2018年05月19日)

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

このプロパティは、CSSの @-規則(At-rules)の1つの @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プロパティを使ってみます。
これは、日本や中国などの東アジア圏のテキストのためのもの。漢字を旧字体にしたり、カナ詰め(カナだけ詰める)ができたり、こっちはとっても使えます!(笑)

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2018/10 | 11
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.