/ programing

初めてのWeb FontをChrome Extenstionで使ってみた

自作の世界時計のChrome Extensionでユーザからデジタル時計周りの要望の声が幾つかありマニフェストバージョン２対応に合わせて実装中。

デジタル時計に専用のフォントを適応させたいのだが、いろいろデザイン作成ツールをインストールしているため、ローカル環境にあるフォントがユーザ環境にも入っているかどうかわからない。それならばWeb Fontを拡張機能に同梱して使えばよいと思った。

Web Fontという仕様があることは知っていたが今まで使ったことがなかったので適応方法から調べた。結果から言うとファイルの配置と、cssの記述だけで済むためChrome Extensionだから特別に何かするということは必要なかった。

調べてわかったのだが、Web Fontで使えるフォントファイルのフォーマットは複数あり、ブラウザによって対応状況が違う。
http://thinkit.co.jp/story/2011/08/18/2233?page=0,1

とはいえ、Chrome ExtensionならChromeだけをケアすればよいのでとくにフォーマットで悩む必要はない。ウェブサイトについても上記を見る限りIE以外はTrueType（.ttf）、OpenType（.otf）でよさそうに見えるが、業界的にはWOFF（.woff）を標準にする流れらしい。

さて肝心のcssの記述方法。まず@font-faceでフォントを定義する。外部サイトのフォントを直接参照しないのであればcssからの相対でurlを指定すればよい。以下のように複数のフォーマットを並べることもできるようだ。

@font-face {
    font-family: 'myfont';
    src: url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype');

}

あとは普通にfontを指定するだけ。

body {
  font-family: 'myfont';
}

気になったことを実験

調べれば分かるかもしれないが実際のChromeの動作を見てみる。Chromeのバージョンは22-dev。

Chrome Extensionからも使える？

A. Webサイト同様に使える。

システムに存在するフォント名を定義するとどうなる？

A. 後勝ち。

@font-face {
  font-family: 'Arial';
  src: url('myfont.otf');
}

独自に宣言したfont-face名も2回定義すると後勝ち。ただし、2回目で定義した時に存在しないファイル名を指定したところ1回目で定義したものが適応された。

定義したフォントが有効な空間は？

font-faceの宣言は同じcssに書かないとだめなのか、先に読まれたcssにあれば参照できるのか。

A. 全体空間で使える。

先に読み込んだcssにあるfont-faceの宣言は他のcssからも参照できたし、逆に先に読み込んだcssで指定したfont-faceを後に読み込んだcssに定義しても適応された。ブラウザが良きに計らってくれる模様。

例) main.css, sub.cssの順に読み込んでもMyFontは適応された。

main.css
p {
  font-family: 'MyFont';
}
sub.css
@font-face {
  font-family: 'MyFont';
  src: url('myfont.otf');
}

フォントの大きさとかも定義できるん？

A. できない。

http://www.w3.org/TR/css3-fonts/#font-face-rule を見る限りsrcしか設定できないようだが、mozillaのサイトではまた別の仕様が公開されていたりもする https://developer-new.mozilla.org/en-US/docs/CSS/@font-face ブラウザによってはfont-sizeが使えるような拡大解釈もあるかもしれないが、仕様の準拠が求められている昨今では無いと思われる。

まー、何がしたかったかというとLess使わなくてもfont-face, font-familyだけで管理できるのかなと少し思っただけ。んなこたーない。

まとめ

Web Fontは簡単に使える。モバイルブラウザの対応状況は少し気になるがChrome Extensionで使う分には障壁は感じないし、何より同梱すればトラフィックも気にしなくて済むのでデザイン重視の拡張機能によっては積極的に使えるんじゃないかと思った。

多分Content-Scriptで既存のサイトのフォントを変更して読みやすくしてくれる拡張機能もありそうだ。

肝心のWeb Font本体について

今回は http://www.fontsquirrel.com/fontface からフリーのフォントを探してみた。というか数字と:APMくらいなら自分でつくることも考えたのだがそれは別に機会があれば調べることにする。

Markdown with by ❤ wp-gfm