Adobe Blank

/ Text by

アドビが新しいオープンソースのWebフォント、“Adobe Blank”を発表した。しかしこのフォント、文字の表示に使うフォントではない。エイプリルフールに書いているので冗談と思われてしまいそうですが本当です。

実際ダウンロードしてサイトに反映したり、フォントとしてコンピュータに登録をしても、文字を入力したところで画面には何も表示されません。というのも、このフォントはあらゆる文字コードに対してフォント名のとおりBlank(空)が登録されているからです。

いずれもAdobeからの提案となりますが、Adobe Blankは別のWebフォントと組み合わせて利用することに用途があります。

デバイスフォントへのフォールバックを無効にするかのように振る舞う

ウェブサイトでWebフォントを利用する場合、フォントを適用したい要素に対しCSS内で以下の様に指定をします。

@font-face {
    font-family: "Webfont Name";
    src: url("webfont.otf");
}

h1 { font-family: "Webfont Name"; }

このようにすれば、ページを読み込めば制作者が意図するWebフォントが表示される。あたりまえですね。ただし、Webフォントを表示するにはサーバーからフォントデータをダウンロードする必要があります。もしユーザがあなたのサイトに初めて訪れるとき、CSSにWebフォントが指定されていた場合どうでしょうか。

ブラウザはバックグラウンドで直ちにフォントデータのダウンロードをし始めるでしょうが、データのダウンロードが完了するまでの間は、ユーザのコンピュータに既にインストールされていて、かつブラウザがデフォルトで指定しているデバイスフォントが優先されることになります。Webフォントが表示されるまでに別のフォントで文字が表示されることがあるのは、ブラウザのこの仕組みのためです。

これをもし「問題」と捉えるのなら、Adobe Blankによってそれは解決できます。

@font-face {
    font-family: "Adobe Blank";
    src: url("AdobeBlank.otf");
}
@font-face {
    font-family: "Webfont Name";
    src: url("webfont.otf");
}

h1 { font-family: "Webfont Name", "Adobe Blank"; }

上記の様に指定した場合、ブラウザでの表示の流れは

  1. CSSの記述順通り、AdobeBlank.otfの読み込みを開始する。80KBと容量の軽いファイルのため、ブロードバンド回線であれば一瞬で完了する。
  2. 続けてwebfont.otfの読み込みを開始する。
  3. CSSの指定に従い、h1要素に対して“Webfont Name”の適用を試みる。この時点でwebfont.otfの読み込みが完了していなければ、続けて“Adobe Blank”の適用を試みる。
  4. AdobeBlank.otfの読み込みは一瞬で完了しているため既に表示可能な状態になっている。
  5. Adobe Blankが適用される。しかし実態は「空」のフォントのため何も表示されない。
  6. webfont.otfの読み込みが完了する。
  7. CSSの適用順序に従い、h1のフォントが優先度の高い“Webfont Name”に置き換わる。

となります。期待する通りに動作すれば、デバイスフォントが現れることなく、フォントデータのダウンロードが完了次第Webフォントで表示されるという仕組みです。

しかしここでお気づきかもしれませんが、AdobeBlank.otfの容量80KBという大きさは、実はそれほど軽いものではないですね。欧文のWebフォントの1ウェイトであれば30〜60KBが相場だと思いますので、Webフォントのファイル自体を自分のサーバーに設置できる状況であればわざわざAdobe Blankを利用するまでも無いかもしれません。

つまるところ、Adobe Blankを利用することでメリットがある状況というのは

  • フォントデータダウンロード中にデバイスフォントを表示させたくない。
  • Webフォントは外部のWebフォントサービスを利用しており、JavaScriptが実行されるまで適用されない。
  • もしくは、日本語フォントなどWebフォントのファイル容量が大きい。

となるのではないでしょうか。

また、表示させたいWebフォントの指定方法を誤り且つAdobe Blankの指定は正しく行った場合、Adobe Blankが適用されたまま空白となってしまうことになり、テキストが表示されずユーザビリティを著しく損ねてしまう点には注意が必要です。

Webフォントの読み込み完了イベントを取得する

Adobe Blankを利用することで、JavaScriptでWebフォントの読み込み完了のタイミングをイベントとして取得することが出来る。

<span>a</span>
@font-face {
    font-family: "Adobe Blank";
    src: url("AdobeBlank.otf");
}
@font-face {
    font-family: "Webfont Name";
    src: url("webfont.otf");
}

span { font-family: "Webfont Name", "Adobe Blank"; }

上記のHTML·CSSにおいて、先にAdobe Blankの読み込みが完了しているという状況を考えます。

Adobe Blankが適用された場合、<span>タグの「幅」はフォントとして空であるため0ゼロになります。一方webfont.otfが適用されると文字が表示され、幅を持つことになります。

つまり、<span>タグの「幅」をJavaScriptのタイマー(setIntervalやRequestAnimationFrame)で監視し、0でなくなった瞬間がWebフォントの読み込みが完了した瞬間と言えるわけです。

なんとも頭のいいハックですね…。ちなみにWebフォント読み込み完了時のイベントを取得する方法としてはGoogleが公開している“WebFont Loader”もありますが、こちらがどういうやり方をしているかも気になってきました。

FYI:

Best Practices for Serving Webfonts to IE9 | Fontspring