【30-4】数字の表示方法を指定する font-variant-numeric

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

font-variant-numericプロパティで「数」を表す文字の表示を指定できます。
「numeric(ヌュメリック)」は「数値」と言う意味だそうです。

ライニング数字(上下のラインが揃った普通の数字)オールドスタイル(数字によって上下のラインが揃ってない昔風のやつ)を切り替えたり、分数を斜線や水平線で表示したり、序数詞(1st や 2nd の st や nd のこと)を上付き文字で表示したりできます。

このプロパティは、IE・Edge 以外のブラウザは対応しているようです。(2018年5月記)
IE・Edge は font-feature-settingsプロパティを使えば表示できます。
font-feature-settingsプロパティについては、【31】OpenType機能を直接指定できる font-feature-settingsプロパティをご覧ください)

参考:
CSS Fonts Module Level 3 | W3C Candidate Recommendation
font-variant-numeric - CSS | MDN

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

font-variant-numericプロパティの値
キーワード normal:デフォルト値。数字の表示に以下のものを使わない。
lining-nums、oldstyle-nums、proportional-nums、tabular-nums、diagonal-fractions、stacked-fractions、ordinal、slashed-zero
グローバル値 font-variant-numeric: inherit; 親の値を継承(コレ書かなくても継承するけど)
font-variant-numeric: initial; 継承した親の値を解消しデフォルト値に戻す
font-variant-numeric: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 全部

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

normal
通常の表示。数字の表示に 以下↓の OpenType機能を使わない。
lining-nums(lnum)
数字をライニング数字で表示。
ライニング数字とは、数字の上下のラインが揃っている数字です。
oldstyle-nums(onum)
数字をオールドスタイル数字で表示。
オールドスタイル数字とは、数字ののラインが揃っていない、古典的な数字です。
proportional-nums(pnum)
数字をプロポーショナル数字で表示。
プロポーショナル数字とは、数字のフォルムによって文字幅が違っているもの。並べた時に字間が空いたり詰まったりしないように作られた数字です。
tabular-nums(tnum)
数字を等幅で表示。
diagonal-fractions(frac)
分数をスラッシュで表示。
stacked-fractions(afrc)
分数を水平線で表示。
ordinal(ordn)
序数詞を上付き文字で表示。
序数とは順番を表す数値で、日付・世紀・世代などで使われます。
slashed-zero(zero)
ゼロをスラッシュ付きのゼロで表示。
スラッシュ付きのゼロは「O(オー)」と読み違え無いように作られた字形。

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

font-variant-numericプロパティは、前回の font-variant-ligaturesプロパティと同じで、OpenTypeフォントに 該当するフォルムが含まれていなければ表示しません。

サンプルでのフォントは Garamond ですが「font-variant-numeric: stacked-fractions(水平線の分数)」以外は表示できました。
(クリックで 別ページでサンプルが開きます)

サンプルページにも貼ってありますが、HTMLはこちら。

<div class="sample">
  <p class="fvn-normal">0123456789<span>(normal)</span></p>
  <p class="fvn-lining">0123456789<span>(lining-nums)</span></p>
  <p class="fvn-oldstyle">0123456789<span>(oldstyle-nums)</span></p>
  <p class="fvn-proportional">0123456789<span>(proportional-nums)</span></p>
  <p class="fvn-tabular">0123456789<span>(tabular-nums)</span></p>
  <p class="fvn-diagonal">1/3, 8/9, 5/12<span>(diagonal-fractions)</span></p>
  <p class="fvn-stacked">1/3, 8/9, 5/12<span>(stacked-fractions)</span></p>
  <p class="fvn-ordinal">1st 2nd 3rd 17th<span>(ordinal)</span></p>
  <p class="fvn-slashed-z">100 5000<span>(slashed-zero)</span></p>
</div>

CSSはこちら

@font-face {
	font-family: AGara;
	src: url('AGaramondPro-Regular.otf') format("opentype");
    }
.sample {
	font-family:AGara;
	font-size:4rem;
	line-height:1.2
	}
.fvn-normal {
	font-variant-numeric: normal}
.fvn-lining {
	font-variant-numeric: lining-nums}
.fvn-oldstyle {
	font-variant-numeric: oldstyle-nums}
.fvn-proportional {
	font-variant-numeric: proportional-nums}
.fvn-tabular {
	font-variant-numeric: tabular-nums}
.fvn-diagonal {
	font-variant-numeric: diagonal-fractions}
.fvn-stacked {
	font-variant-numeric: stacked-fractions}
.fvn-ordinal {
	font-variant-numeric: ordinal}
.fvn-slashed-z {
	font-variant-numeric: slashed-zero}
.sample p span {
	font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
	font-size:15px;
	color:#579961;
	margin-left:.5em;
	font-variant-ligatures: none;
	letter-spacing:normal
	}

次回予告

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

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

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

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

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

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この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.