どちらかというとこっちが本題だったんですが、文章が長くなる感じだったんで分けてみました。リガチャーアイコンフォントを使うにはまずはWebフォントの指定を知ってから、という感じですね！というわけでWebフォントのCSS指定について知りたい人はWebフォントのCSS指定2014年度版とこれまでの歩みを読んでみてください。

リガチャーアイコンフォントの実例

もともと私がリガチャーアイコンフォントというものを知ったのは@fladdictさんのアイコンを合字Webフォントとして扱うSymbolSetが革新的にステキ | fladdictという記事でした。ここで紹介されたSymbolsetを知ったときはかなりの衝撃を受けました。

そして@kudakurageさんが制作したLigature Symbolsなどの登場もあり、アイコンフォントには実装の多様性が生まれたように思います。

以下はデモです。

See the Pen Ligature Symbol Font Demo by You Sakai (@webcre8) on CodePen.

リガチャーアイコンフォントの必要性

eyeglasses online cheap
軽く説明しておくと、リガチャー（合字）というのは複数の文字を組み合わせた文字のことで、フォントの持つ機能の一つです。ある組み合わせ、例えばfの次に続くiなど、特定の組み合わせでは文字がくっついたりします。ここでは深くは説明しませんが、様々なフォントの機能の一つ一つの説明はMSDNのOpenType フォントの機能で詳しく説明されているので参照してみてください★

で、この記事で解説するリガチャーアイコンのフォントは、スケーラブルなアイコンの実装方法としてアイコンフォントを使った場合の、アイコンフォントの欠点を補うために考え出されたものです。

フォントのグリフにクリップアートをあてたDingbatsの様なフォントも含め、こうしたフォントは見た目に表示されるものと入力に関連性がないのでセマンティックではないですし、見た目上はアイコンが出ているのにソース上には意味のない文字を含んでしまうことになります。しかしリガチャーの機能を使えば、例えばtwitterという入力に対してツイッターアイコンをリガチャーとして設定することでソース上はtwitterと書かれているところに見た目だけアイコンを表示させることができるわけです。

UIのアイコンとして利用されることが主に取りざたされるリガチャーアイコンフォントですが、私としては絵文字として使うのが面白いなーと思っていて、単にimg要素やimode絵文字等を使うより汎用的なテキストになるのではないかなーと考えてます。

リガチャーアイコンのCSS実装

では実際にWebでリガチャーを用いる場合にはCSSではどういう記述が関係してくるかを解説しましょう。

font-feature-settingsプロパティー

リガチャーを含め、フォントの様々な機能を利用するためにはfont-feature-settingsプロパティーを用います。

.icon a {
  font-family: "LigatureSymbols" ;
  font-feature-settings: "liga" 1 ;
}

font-feature-settingsプロパティーの様々なフォントフィーチャーについてはフォントの機能を使えるCSS3のFont feature settingsとはという記事に詳しく書かれてあります。この記述によってリガチャー他のフィーチャーをオンにできます。

この機能はFirefoxではデフォルトでオンになっているらしく、このプロパティーを明示的にオフにした場合にのみリガチャーが機能しなくなりました。また、Google Chromeでは接頭辞がないと機能しませんが、10以降のIEには接頭辞なしの指定が有効です。

.icon a {
  font-family: "LigatureSymbols" ;
  -webkit-font-feature-settings: "liga" 1 ;
  font-feature-settings: "liga" 1 ;
}

つまりリガチャーの最低限の記述としてはfont-feature-settingsプロパティーのWebkit用と通常の指定、両方があればいいことになりますね！★

text-renderingプロパティー

text-renderingプロパティーは、リガチャーアイコンだけではなく海外のサイトのフォントに対する指定として時折見られるもので、詳しい解説はCSS Tricksのtext-rendering | CSS-Tricksにあります。そもそもSVGの仕様にあるもので、日本語ではあまり詳しい情報がありません。

値はoptimizeLegibilityをよく目にします。これは可読性に最適化するという意味になりますね。実際には文字詰めを自動的に軽く行ってくれるもので、その効果のほどはterkel.jpのtext-rendering: optimizeLegibilityという記事で実験を確認できます。要はPhotoshopで言うメトリクスがオンになっている状態に近いのではないでしょうか。

そして、これを指定しているとWebkit系ではfont-feature-settingsプロパティーでリガチャーを有効にしていなくてもリガチャーが適用されます。読みやすさについての機能を全部オンにしてくれるというわけです。なんかすごいですね！で、Firefoxは前述の通りデフォルト状態でリガチャーが使えます。ただ、Firefoxでこのメトリクス状態をオフにすることはできませんでした…どうしたらいいんだろう（しなくていいんだろうけどw）。

.icon a {
  font-family: "LigatureSymbols" ;
  text-rendering: optimizeLegibility ;
  font-feature-settings: "liga" 1 ;
}

じゃあこれさえ設定していれば済むんじゃないか…と思いきや、IEではこの指定が効きません。なのでtext-renderingプロパティーによってリガチャーを使うなら結局font-feature-settingsプロパティーも必要だということになりますねw

font-variant-ligaturesプロパティー

font-variant-ligaturesプロパティーは、以前からCSSの仕様にありもともとスモールキャップスにするだけだったfont-variantプロパティーの拡張です。他に以下のような種類があります。

• font-variant-caps
• font-variant-east-asian
• font-variant-alternates
• font-variant-numeric
• font-variant-position

全て前述のフォントフィーチャーのいずれかに対応しており、これを使って各フィーチャーのオンオフをすることもできます。

CSSの仕様にはリガチャーなどのコントロールにはこのfont-variantシリーズを使うのが望ましいと書いてあるんですが、今の所こっちを使ってリガチャーを使っているサイトを見たことがないですね…。実装が早かったとかそういう事情もあると思います。

Authors should generally use ‘font-variant’ and its related subproperties whenever possible and only use this property for special cases where its use is the only way of accessing a particular infrequently used font feature.

CSS Fonts Module Level 3

font-smoothingプロパティー

font-smoothingプロパティーについても少し触れます。これはリガチャーフォントにとって必須というわけではないですけど、やはり海外のサイトではフォントの設定としてセットで書かれていたりします。フォントのアンチエイリアスのかけ方を指定するもので、フォントやアイコンをキレイに見せるために使える、という感じですね。

.icon a {
  font-smoothing: antialiased ;
}

このプロパティーもまだWebkitでしか使えないのであまり気にしないでいいかなと思ってます。ちょっと別途軽めの記事を書きます。

おわりに

長かったですがこんな感じです。フォント関連のCSSってマニアックなのがめっちゃあるので勉強が追いつかない感じなんですが、ちゃんと説明できるように頑張って勉強したいところですw

今回の記事を書くにあたって、前述の@kudakurageさんに色々話しを伺いました。この場を借りてお礼申し上げます！

ところで今週末、フォントに関する勉強会を開く予定です。

フォントもくもく会 | Peatix

これはフォントについての学習をみんなでやろうぜという会で、セッションのあるセミナー形式ではありません。あくまで参加した皆さんが一人一人やりたいことをやって、希望者がいれば内容についてプレゼンするなどのことを考えています。

もちろん参加する人はフォントが好きな人のはずなので、他の人がやったことを聞いてみたり、考えていることを相談して盛り上がるのもアリだと思います！エンジニア、デザイナー関係なく、和気あいあいとフォントが学べればいいなと思っています★

ここに書いたようなことを学んでもいいし、フォントを作るとか、そういうのでも構いません。当日は[デザイン]フォントのことが好きになれるオススメコンテンツ、本、アプリ等を紹介しますで紹介したようなフォントの本なんかも持っていきます。皆さんで楽しくフォントについて学びましょうー！