ほんっとにはじめての HTML5 と CSS3

今回からは、font-variant に関するプロパティを見ていきましょう。

まずは、font-variant-capsプロパティを使ってみます。
このプロパティは、CSS 2 では font-variantプロパティとして、スモールキャップ（小文字の大きさの大文字）を指定するためのものでした。
CSS 3（Fonts Module Level 3）からは、値が増えて font-variant-capsプロパティと名前も変わりました。

そして、font-variantプロパティは、複数の font-variant 関係のプロパティの「ショートハンドプロパティ」になったんです。（このショートハンドは後日まとめます）

で、今回の font-variant-capsプロパティなんですが、IE, Edge, Safari（iOS Safari も含む）が未実装。...なので今すぐは使えないかな。
Firefox は一部キーワードで反応せず、実装しているのは今のところ Chrome だけのようです。（2018年4月記）

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font-variant-caps - CSS | MDN

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

font-variant-capsプロパティの値
キーワード	normal ：デフォルト値。代替えのグリフ（字体）を使用しない small-caps、all-small-caps、petite-caps、all-petite-caps、unicase、titling-caps
グローバル値	font-variant-caps: inherit; 親の値を継承（コレ書かなくても継承するけど） font-variant-caps: initial; 継承した親の値を解消しデフォルト値に戻す font-variant-caps: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

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

font-variant 関係のプロパティは、OpenTypeフォントの機能を利用します。
下の表では、それぞれの値で使う OpenType機能タグ値（feature-tag-value）も表示しています。
＊OpenType機能タグ値についての詳細は、
【31】OpenType機能を直接指定できる font-feature-settingsプロパティをご覧ください。

キーワード	OpenType機能タグ値	概要
small-caps	smcp	小文字をスモールキャップで表示
all-small-caps	c2sc, smcp	大文字・小文字をスモールキャップで表示
petite-caps	pcap	小文字をプチキャップ（petite caps）で表示
all-petite-caps	c2pc, pcap	大文字・小文字をプチキャップ（petite caps）で表示
unicase	unic	大文字をスモールキャプ、小文字は通常の字体で表示
titling-caps	titl	タイトル用の大文字で表示

フォントファミリーにpetite-caps のグリフが無くて、「petite-caps」「all-petite-caps」が指定されたら、 このプロパティは「small-caps」「all-small-caps」と同じ表示にします。
titling-caps のグリフがない場合は、このプロパティは何もしません。

font-variant-capsプロパティの使い方

各キーワードを試してみます。フォントは Times でやってます。
（Chromeは対応しているようです。Firefoxでは unicase には無反応でした）

Chrome（Mac）では下のように表示されました。

Times は、petite-caps、titling-caps は無いので表示しませんね。ま、こんなもんか。
（有料フォントで様々なグリフを持っているものなら反応するかもです）

上のサンプルのソースコードです。

<div class="mihon">
  <p style="font-variant-caps:normal">
  Fonts Module <span>(font-variant-caps: normal)</span></p>
  <p style="font-variant-caps:small-caps">
  Fonts Module <span>(font-variant-caps: small-caps)</span></p>
  <p style="font-variant-caps:all-small-caps">
  Fonts Module <span>(font-variant-caps: all-small-caps)</span></p>
  <p style="font-variant-caps:petite-caps">
  Fonts Module <span>(font-variant-caps: petite-caps)</span></p>
  <p style="font-variant-caps:all-petite-caps">
  Fonts Module <span>(font-variant-caps: all-petite-caps)</span></p>
  <p style="font-variant-caps:unicase">
  Fonts Module <span>(font-variant-caps: unicase)</span></p>
  <p style="font-variant-caps:titling-caps">
  Fonts Module <span>(font-variant-caps: titling-caps)</span></p>
</div>
<style>
.mihon {
	color:black;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:0 1.5em
	}
.mihon p {
	font-family:'Times New Roman',Times,serif;
	margin:15px 0;
	font-size:2rem;
	line-height:1.2
	}
.mihon p span {
	font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
	font-size:15px;
	color:#579961;
	font-variant-caps:normal}
</style>

Small Caps は印刷・エディトリアルの用語です。
Cap は「Capital Letter」の略で大文字のこと。「Capital」は頭文字という意味もあるので。大文字は「Upper Case」とも言います。
Low は「Lower Case」の略で小文字。
活版印刷時代には活字（金属で作った字の型）を使っていましたが、それを並べて版を作る場で、上段のケース（Upper Case）に大文字、下段のケース（Lower Case）に小文字を入れてたからだって。
下図は業界用語の「Cap & Low」「All Caps」「Small Caps」の違いです。

次回予告

次回は font-variant-positionプロパティを使おう。
これは、下付き文字・上付き文字を表示します。
下付き文字にする <sub>要素・上付き文字にする <sup>要素のようなスタイルで表示します。

関連記事

• 【31】OpenType機能を直接指定できる font-feature-settings
• 【30-7】ショートハンドプロパティになった font-variant
• 【30-6】漢字や仮名のための font-variant-east-asian
• 【30-5】文字の代替えを指定する font-variant-alternates
• 【30-4】数字の表示方法を指定する font-variant-numeric
• 【30-3】リガチャ（合字）を指定する font-variant-ligatures
• 【30-2】上付き・下付き文字を指定する font-variant-position
• 【30-1】スモールキャップなどを指定する font-variant-caps
• 【29】文字間を自動調整してくれる font-kerningプロパティ
• 【28】ボールドやイタリックを合成するか決める font-synthesis
• 【27】フォントサイズを調整する font-size-adjustプロパティ
• （ちょっとメモ）CSS3とは？ CSSのモジュールやレベルについて
• （ちょっとメモ）@font-face で Webフォントを使おう
• 【26-7】フォントをまとめて指定する fontショートハンドプロパティ
• 【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう