アイコン・フォントとユーザースタイルシート

ユーザースタイルシートでフォントを独自に設定(固定)している場合に、アイコン・フォントがうまく表示されないであろうことについて順に説明している記事を読んだ。ユニコードの私用領域へのマッピングだけでなく、代替となる文字列を提供する……だけでは、まだ足りないのではないかという話。前に書いた気もする。

ユーザースタイルシートによるフォントの固定だけでなく、ブラウザーの設定で文書のフォントを利用しない場合や、私用領域へのマッピングではなくリガチャを使っていたとしても同じ話。きちんと意識しておき割り切るか、場合によってはSVGで背景として表示する方法に変える必要がある。アイコンの表示が欠けた場合、ウェブサイトが機能しなくなる恐れのあるナビゲーションなどでは避けた方が無難かなと僕は思う。完全に補助的な飾りにすぎないケースにおいては空白や豆腐でも可としたい。

最後に挙げられているgetComputedStyle()を使ったフォント適用状況を確認するスクリプトは、チェックしてどうするかまでは書かれてない。多分Modenizrと同じようにhtml要素にクラスを振るまでをこのスクリプトを使って行い、そのクラスを使って普通に文字列と表示されるようなルールセット(widthclipプロパティー他をリセットするもの)を作って上書きしてやるのかなと。