「誰でもつかえる！ウェブフォント実践マニュアル」を読んで

書籍

誰でもつかえる! ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))

この本を選んだ理由

• ウェブフォントについて全く知らないので、知識の幅を広げたいと思ったから。

印象に残った点

フォントやウェブフォントについての基礎が書かれている

• フォントはグリフの集合体である
  • グリフは文字や記号を表現するベクター図形のこと。
  • フォントファイルのサイズはグリフの数によってきまるため、日本語フォントはグリフの数が多く、パスも複雑な文字が多いためサイズが大きくなる。
• ウェブフォントにも形式がある
  • EOT、TTF、WOFF、WOFF2の4種類がある。
  • IE11以降のモダンブラウザであればWOFF2のみで良いが、古いIEもWOFF形式も用意する必要がある。

ウェブフォントを自前で用意することも可能

• ネットからダウンロードして、サブセット化してサイズを小さくすると良い。
  • 商用利用可でもウェブフォントは駄目や例もあるので注意が必要。
  • サブセット化は「JISX0208 第一水準漢字+記号+基本ラテン文字+カタカナ+ひらがな」が一般的。
  • サブセット化することで約15MBが約700KBになる。
  • サブセット化はフリーソフトが存在する。
• 最適化したフォントをサーバへupし、CSSの@font-faceで定義したフォントを利用する。
  • 複数定義すると上から順に呼ばれるので優先したいほうを上に書くこと。
• 勿論ウェブフォント配信(Google Fonts)サービスもある。

フォントの遅延読み込みはレンダリング遅延を引き起こす

• HTML/CSS/JavaScriptを受信し、ピクセルとしてレンダリングするまでの中間段階で行われている一連の処理の流れをクリティカルレンダリングパスという。
  • こちらにクリティカルレンダリングパスの図があるので参考に。
• コンテンツの初回描画とフォントのダウンロードが被ることが原因。
• ブラウザ内部のフォントの扱いは3つのチェックポイントがあるが、ブラウザ間で挙動が異なる
  • block period、swap period、failure periodの3つのチェックポイント
    • こちらに3つのチェックポイントを表現した図があるので参考に。
  • block period→swap period間の切り替わるタイミング、フォールバックの有無がブラウザで異なる
    • safari厳しい。ダウンロードまで待ち続けるんか。。。

ウェブフォントではFOUT、FOUTという問題がある

• FOUT(Flash of Unstyled Text)は代替えフォントが表示されてしまった後に指定フォントへ表示が切り替わることでおきる瞬間のチラツキのこと。
• FOIT(Flash of Invisible Text)はsafariではダウンロードを待ち続けるのでダウンロード完了までテキストが表示されなくなる問題のこと。
  • CSSのfont-displayプロパティでFOUTやFOITのタイミングを制御できる。
  • JavaScriptのFont Loading API/Web Font Loaderでも制御できる。

ウェブフォントの扱いには注意が必要

• フォントの再配布(フォントをウェブフォントとして利用)、フォントの改変(サブセット化)にあたる可能性がある
• SIL Open Font License、Apache License 2.0、M+ FONT LICENSEであればウェブフォントとして利用できる。

オススメの日本語フリーフォントが書いてある

• これはWeb素人にはありがたい項目。

今後

• ETag、Cache-Controlなど全然知らないワードが多かった。WEBに関するより基礎的な技術を勉強してみようと思う。