【30-3】リガチャ(合字)を指定する font-variant-ligatures

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

font-variant-ligaturesプロパティは、使用するフォントに「リガチャ(合字)」が含まれていれば、その合字の表示をするかどうか指定します。
リガチャは欧文フォント専用のモノ。日本語の文字には無いので、ちょっと馴染みが薄いですね。

リガチャ(Ligature・合字) とは、印刷・編集用語で、欧米の文字では昔から使われている「復数の文字を合体させて1文字にした文字」のこと。
下図は Open Type フォント(OTF)なら含まれていると思われる常用合字です。(フォントによっては含まれないものもあります)

上記の他に、スクリプト体(筆記体)などにはデザイン的に凝った合字があったり、アイコンフォント(例:Twitterとタイプすると小鳥のアイコンになるとか)なども合字の1種だそうです。

リガチャは、Photoshop や Illustrator などでも、Open Type フォントなら利用できます。欧文フォントをよく利用する人は、たぶん使ったことがあるはず。

このプロパティは、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-ligatures - CSS | MDN

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

font-variant-ligaturesプロパティの値
キーワード normalがデフォルト値。
none、common-ligatures、no-common-ligatures、discretionary-ligatures、no-discretionary-ligatures、historical-ligatures、no-historical-ligatures、contextual、no-contextual
グローバル値 font-variant-ligatures: inherit; 親の値を継承(コレ書かなくても継承するけど)
font-variant-ligatures: initial; 継承した親の値を解消しデフォルト値に戻す
font-variant-ligatures: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 全部

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

normal
common-ligatures(常用合字)と contextual(前後の文字による字体の変更)を可能にします。それ以外は不可。
none
すべてのリガチャ不可。
common-ligatures(liga, clig)
常用合字(fi fl など)
「常用合字」は、たいていの OTFフォントに含まれている一般的な合字です。(含まれていないフォントもあります)
no-common-ligatures
常用合字を不可にする。
discretionary-ligatures(dlig)
任意のリガチャ(フォントデザイナーが作った合字)
単語の先頭や末尾になる文字に「飾り(ニョロリンとかくるりんとか)」を付けたやつなど、デザイナーによっていろいろです。アイコンフォントもコレに当たります。
有料フォントなら おもしろい合字を含むものがけっこうがあります。例えば下図は King Basil(旧名 Spiffy McGee)というフォント。様々なリガチャが用意されています。
no-discretionary-ligatures
「任意のリガチャ」を不可にする。
historical-ligatures(hlig)
古典的なリガチャ(ドイツ語の t と z の合字 tz など)
(下図は W3C の仕様書のものです)
no-historical-ligatures
「古典的なリガチャ」を不可にする。
contextual(calt)
前後の文字による字体の変更(スクリプト体(筆記体)での「文字の連結」などのこと)
厳密には「合字」ではないけど、前後の文字の組み合わせで形状を変えるという共通点があるのだそうです。(下図は W3C の仕様書のものです)
no-contextual
「前後の文字による字体の変更」を不可にする。

font-variant-ligaturesプロパティを試してみます

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

というわけで、サンプルは「normal」「none」「common-ligatures」「no-common-ligatures」のキーワードを試してみます。

*その他のキーワードは 該当する合字を持つフォントを探すのがアレで...割愛いたします。悪しからず。フォントをお持ちの方は試してみてください。

サンプルでは「normal」「common-ligatures」で常用合字が表示されています。
(クリックで 別ページでサンプルが開きます)

サンプルページにも貼ってありますが、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はこちら。Safari はベンダープレフィックス -webkit- が必要だそうです。

@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; /*for Safari*/
	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
	}

letter-spacingプロパティで、1文字ずつの間隔を空けてみると、合字部分が「1文字」になっているのがわかります。
(クリックで 別ページでサンプルが開きます)

Chrome では上記のように表示されますが、ブラウザによっては font-variant-ligatures: none に未対応だったり(noneでもリガチャが使われる)します。(2018年5月記)

次回予告

次回は font-variant-numericプロパティを使ってみよう。
このプロパティは「数(numeric)」を表す文字の表示を指定します。分数とかを表示する時に便利です。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

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