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

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

＜サンプル1＞

HTMLはこちら

<div class="sample">
  <p class="fvl-nomal">Office. flower.<span>(normal)</span></p>
  <p class="fvl-none">Office. flower.<span>(none)</span></p>
  <p class="fvl-common-li">Office. flower.<span>(common-ligatures)</span></p>
  <p class="fvl-no-common-li">Office. flower.<span>(no-common-ligatures)</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
	}
.fvl-nomal {
	-webkit-font-variant-ligatures:normal;
	font-variant-ligatures:normal}
.fvl-none {
	-webkit-font-variant-ligatures:none;
	font-variant-ligatures:none}
.fvl-common-li {
	-webkit-font-variant-ligatures:common-ligatures;
	font-variant-ligatures:common-ligatures}
.fvl-no-common-li {
	-webkit-font-variant-ligatures:no-common-ligatures;
	font-variant-ligatures:no-common-ligatures}
.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
	}

＜サンプル2＞ = letter-spacing: 0.2em を指定した場合

HTMLは先ほどと同じです。CSSは先ほどのコードに下記を足しただけ。

.sample {
	letter-spacing:0.2em;
	}