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

CSSの font-variant-numericプロパティのサンプルです。

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
	}