【30-1】スモールキャップなどを指定する font-variant-caps

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

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

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

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

font-variant とは
variant(べリアント)とは「変形」「異形」と言った意味。

欧文フォントには、スモールキャップ(小文字の大きさの大文字)があったり、f を繰り返す場合(ff)、横線を1本に合体させるとか「fi」と書いた時「i」の点を略すとか、昔ながらの慣習(ルール)があります。
漢字にも「簡略型(現在使用されてる字体)」と「旧字体」があったり、仮名は漢字と比べて字間が開いて見えるので「仮名詰め」をしたり、漢字の上に小さく「ふりがな」を乗せる「ルビ」などがあります。

それらの、ちょっと普段と違うフォルムを指定するのが font-variant 関係のプロパティ。これは OpenTypeフォントの機能 を使っています。

OpenType機能についての資料はこちら:
CSS での OpenType 機能の構文 | Adobe
OpenType フォントの機能 | Developer Network | Microsoft

で、今回の 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 には無反応でした)

Fonts Module (font-variant-caps: normal)

Fonts Module (font-variant-caps: small-caps)

Fonts Module (font-variant-caps: all-small-caps)

Fonts Module (font-variant-caps: petite-caps)

Fonts Module (font-variant-caps: all-petite-caps)

Fonts Module (font-variant-caps: unicase)

Fonts Module (font-variant-caps: titling-caps)

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>要素のようなスタイルで表示します。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2018/08 | 09
- - - 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.