In My Circle

せんがんが、よしなしごとをつづります。

Webフォント

Webフォントサービスで有名な「フォントプラス」を運営するソフトバンク・テクノロジーさんのご厚意で、勉強会を開いていただきました。いつもお世話になっているフリーのデザイナーさん2名と、一緒に書籍を書かせていただいた秋葉さん&奥さまのちひろさんと参加!

「Webフォント」については各自調べていただくとして、私はWebフォントの普及を心待ちにしているひとりです。

これまで、ボタンのラベルや文章の見出しなどは画像を使って表現されることがほとんどでした。
CSS3のおかげで、最近では画像に頼らずにボタンなどのビジュアルを効果的に表現できるようになってきました。が、CSS3でどんなに美しいグラデーションを表現したとしても、上に乗っている文字(フォント)がカッコ悪いと台無し、というケースは多々ありそうです。
Webフォントを利用すれば、画像を一切使わずに、洗練されたビジュアルのボタンや見出しを作ることが可能になります。画期的です!

以前より、このサイトのフッタの中の「Please do not reproduce without prior permission.」の文字はGoogle Web fontsを利用して表示していました。見慣れないフォントなので画像のように見えるかもしれませんが、ドラッグすると選択できるので「文字」ということが確認できると思います。

で、せっかく勉強会を開いていただいたので、このたびフッタだけでなく見出しもWebフォントで表示するよう変更してみました。もちろん「フォントプラス」さんのフォントを使って!
このページの上部にあるブログタイトル「In My Circle」や、この記事のタイトル「Webフォント」をよーく見てみてください。
いかがでしょう?テキストとは思えませんよね。おもしろい!

このページを開いたときに、「In My Circle」や「Webフォント」の文字がいったんデバイスフォントで表示され、その後一瞬文字が消えてからWebフォントで表示されることに気づいた方がいらっしゃるかもしれません。
これは「ちらつき」と言われる現象ですが、ちょっと気になりますよね。Webフォントの課題のひとつだそうです。

あともうひとつ、実際に利用して気になったのは、ブラウザによって行内の文字位置(垂直方向)がまちまちになることです。
この画像をご覧ください。


左はIE9+Win7、右はGoogle Chrome+Win7です。フォントの指定をしない状態だと、このように表示されます。

次に 、Webフォントのを指定した状態です。上と同じく、左がIE9+Win7、右がGoogle Chrome+Win7です。

IE9での表示結果で、テキストがずいぶん上の方に寄ったように見えます。Google Chromeでは少々下の方に寄りました。line-heightなどそれらしいプロパティを設定しても調整できませんでした。ちなみに、左側のアイコンは背景画像として表示しており、「background-position:left top」を指定しています。

フォントプラスのサイトで紹介されている事例を拝見しても、同じ現象が起こっているようです。これはどうしたものか…。

このように、Webフォントにはまだいくつかの課題が残っています。
でも、私は恩恵の方がはるかに大きいと考えているので、無理のない範囲で積極的に使っていくつもりです!早くふつうに利用できるようになるといいなあ。

追記(2013年5月8日):上記の問題、解決したようです。スクリプトの再発行→埋め込みの手間はかかりますが、私の環境ではバッチリ直りました。FONT PLUSさん、ありがとうございます!
http://webfont.fontplus.jp/news/view/Q5Ds4~116Hc%3D

カテゴリ:In My Circle, 作った, 参加した Posted by 千貫りこ on 2012年7月24日