WEBCRE8.jpウェブクリ8.jpwebデザイナーによる、デザインとwebを楽しむ情報ブログRSSABOUT調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。先日書いた記事の続きです。Webサイトのアイコンを組み込む方法として一部でリガチャーを使ったものが採用されていますが、その際のCSS指定について色々調べてみました。どちらかというとこっちが本題だったんですが、文章が長くなる感じだったんで分けてみました。リガチャーアイコンフォントを使うにはまずはWebフォントの指定を知ってから、という感じですね!というわけでWebフォントのCSS指定について知りたい人はWebフォントのCSS指定2014年度版とこれまでの歩みを読んでみてください。fladdictという記事でした。ここで紹介されたSymbolsetを知ったときはかなりの衝撃を受けました。Symbolsなどの登場もあり、アイコンフォントには実装の多様性が生まれたように思います。cheap軽く説明しておくと、リガチャー(合字)というのは複数の文字を組み合わせた文字のことで、フォントの持つ機能の一つです。ある組み合わせ、例えばfの次に続くiなど、特定の組み合わせでは文字がくっついたりします。フォントの機能で詳しく説明されているので参照してみてください★で、この記事で解説するリガチャーアイコンのフォントは、スケーラブルなアイコンの実装方法としてアイコンフォントを使った場合の、アイコンフォントの欠点を補うために考え出されたものです。フォントのグリフにクリップアートをあてたDingbatsの様なフォントも含め、こうしたフォントは見た目に表示されるものと入力に関連性がないのでセマンティックではないですし、見た目上はアイコンが出ているのにソース上には意味のない文字を含んでしまうことになります。リガチャーの機能を使えば、例えばtwitterという入力に対してツイッターアイコンをリガチャーとして設定することでソース上はtwitterと書かれているところに見た目だけアイコンを表示させることができるわけです。文章にリガチャーアイコンを使った場合UIのアイコンとして利用されることが主に取りざたされるリガチャーアイコンフォントですが、私としては絵文字として使うのが面白いなーと思っていて、単にimg要素やimode絵文字等を使うより汎用的なテキストになるのではないかなーと考えてます。リガチャーアイコンのCSS実装では実際にWebでリガチャーを用いる場合にはCSSではどういう記述が関係してくるかを解説しましょう。font-feature-settingsプロパティーリガチャーを含め、フォントの様々な機能を利用するためにはfont-feature-settingsプロパティーを用います。settingsとはという記事に詳しく書かれてあります。この記述によってリガチャー他のフィーチャーをオンにできます。この機能はFirefoxではデフォルトでオンになっているらしく、このプロパティーを明示的にオフにした場合にのみリガチャーが機能しなくなりました。Chromeでは接頭辞がないと機能しませんが、10以降のIEには接頭辞なしの指定が有効です。CSS-Tricksにあります。そもそもSVGの仕様にあるもので、日本語ではあまり詳しい情報がありません。値はoptimizeLegibilityをよく目にします。これは可読性に最適化するという意味になりますね。optimizeLegibilityという記事で実験を確認できます。要はPhotoshopで言うメトリクスがオンになっている状態に近いのではないでしょうか。実際にPhotoshop画像と並べてみてもほぼ同じ見た目になっているそして、これを指定しているとWebkit系ではfont-feature-settingsプロパティーでリガチャーを有効にしていなくてもリガチャーが適用されます。読みやすさについての機能を全部オンにしてくれるというわけです。なんかすごいですね!で、Firefoxは前述の通りデフォルト状態でリガチャーが使えます。Firefoxでこのメトリクス状態をオフにすることはできませんでした...どうしたらいいんだろう(しなくていいんだろうけどw)。;}じゃあこれさえ設定していれば済むんじゃないか...と思いきや、IEではこの指定が効きません。text-renderingプロパティーによってリガチャーを使うなら結局font-feature-settingsプロパティーも必要だということになりますねwfont-variant-ligaturesプロパティーfont-variant-ligaturesプロパティーは、以前からCSSの仕様にありもともとスモールキャップスにするだけだったfont-variantプロパティーの拡張です。他に以下のような種類があります。font-variant-capsfont-variant-east-asianfont-variant-alternatesfont-variant-numericfont-variant-position全て前述のフォントフィーチャーのいずれかに対応しており、これを使って各フィーチャーのオンオフをすることもできます。CSSの仕様にはリガチャーなどのコントロールにはこのfont-variantシリーズを使うのが望ましいと書いてあるんですが、今の所こっちを使ってリガチャーを使っているサイトを見たことがないですね...。実装が早かったとかそういう事情もあると思います。3font-smoothingプロパティーfont-smoothingプロパティーについても少し触れます。これはリガチャーフォントにとって必須というわけではないですけど、やはり海外のサイトではフォントの設定としてセットで書かれていたりします。フォントのアンチエイリアスのかけ方を指定するもので、フォントやアイコンをキレイに見せるために使える、という感じですね。;}このプロパティーもまだWebkitでしか使えないのであまり気にしないでいいかなと思ってます。別途軽めの記事を書きます。おわりに長かったですがこんな感じです。フォント関連のCSSってマニアックなのがめっちゃあるので勉強が追いつかない感じなんですが、ちゃんと説明できるように頑張って勉強したいところですw今回の記事を書くにあたって、前述の@kudakurageさんに色々話しを伺いました。この場を借りてお礼申し上げます!ところで今週末、フォントに関する勉強会を開く予定です。Peatixこれはフォントについての学習をみんなでやろうぜという会で、セッションのあるセミナー形式ではありません。参加した皆さんが一人一人やりたいことをやって、希望者がいれば内容についてプレゼンするなどのことを考えています。参加する人はフォントが好きな人のはずなので、他の人がやったことを聞いてみたり、考えていることを相談して盛り上がるのもアリだと思います!エンジニア、デザイナー関係なく、和気あいあいとフォントが学べればいいなと思っています★ここに書いたようなことを学んでもいいし、フォントを作るとか、そういうのでも構いません。当日は[デザイン]フォントのことが好きになれるオススメコンテンツ、本、アプリ等を紹介しますで紹介したようなフォントの本なんかも持っていきます。皆さんで楽しくフォントについて学びましょうー!tweethatenafacebook_likewebcre8はTwitterを使っています。