2013-09-05

Detect Font Loading v0.1.0

とりあえず作っただけ感あふれてたDetect Font Loadingをここで使うことに決めたので、少し手直ししてBowerに登録した。タイムアウトとかチェック間隔の設定ができたり、複数のフォントをまとめてチェックできたりするようになった。必要最低限の機能は揃った気がする。

インストールはBower使うのが一番楽。

$ bower install --save detect-font-loading

使い方はライブラリ本体を読み込んで、引数にフォント名を指定してDFL.detect()を呼ぶのみ。

<script src="bower_components/detect-font-loading/detect-font-loading.js"></script>
<script>
  DFL.detect(['Source Sans Pro', 'Source Code Pro'], 30000, 1000);
</script>

DFL.detect()の引数は3つで、後者の2つは任意。

1. フォント名またはフォント名の配列(必須)
2. タイムアウトのミリ秒(デフォルト: 15000)
3. チェック間隔のミリ秒(デフォルト: 500)

最後に読み込みが完了した時に付けられるクラス名を使ってCSSでフォントを指定する。

.dfl-source_sans_pro body {
  font-family: "Source Sans Pro", sans-serif;
}

.dfl-source_code_pro pre {
  font-family: "Source Code Pro", monospace;
}

クラス名はフォント名を小文字にして空白をアンダースコアに変換したものに.dfl-がプリフィックスとして付く。例えば「QuiCk bRowN FoX」という名前のフォントの場合は以下のようなクラス名になる。

.dfl-quick_brown_fox

もっときっちりと変換した方が確実だとは思うけど、そもそも@font-face定義側でフォント名をよしなにした方が良いと思っているのでこんな程度にしてる。