私用領域へのマッピングだけでは解決しないもの

意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情の最後でアイコン・フォントが意味不明な文字になってしまうことに対して警鐘を鳴らしている。僕もDingbatのWebフォントというタイトルで似たようなことは書いたが、最近はU+E000からU+F8FFのPrivate Use Area (私用領域または外字領域)へアイコンをマッピングするもの増えてきており、そういった問題については一部解決しつつある。ただしフォールバックできない問題は依然として残るので、JavaScriptの力を借りつつCSS側で対応してやる必要がある。

私用領域にマッピングしたとしても解決するのは意味不明な文字列が表示されてしまうことだけなので、依存する使い方、例えば画像置換のような形でアイコンと文字列を置き換えるような使い方はそのままでは問題がある。そうしてしまうとWebフォントが無効な環境では空白やいわゆるゲタや豆腐になってしまうので。

この問題に対して適切なフォールバックを行うにはCSSだけでは難しい(不可能というわけではない)ので、Modernizrを使うと良さそう。

.test::before {
  font-family: "Icon Font", fantasy;
  content: "\E000";
}

.no-fontface .test::before {
  content: url("fallback.svg");
}

.no-fontface.no-svg .test::before {
  content: url("fallback.png");
}

スケーリングのことも考えてSVGも使う場合はこうなる。まぁSVGは冗談なので普通にPNGでフォールバックすれば良いと思う。

実際には依存した使い方それ自体が悪いわけではないと思う。単にFirefoxなどで手軽で確認できるにもかかわらずフォールバックのことをまるで考えていないというWeb開発者が悪いのであって、Webフォントが有効ならそれに依存したページを、無効なら依存しないページを提供すれば良いだけのはずだ。勿論適切なフォールバックが実現できそうもないというのならばWebフォントの使用を見送る必要はあるが、Future Friendly(Future Proofではなく)という観点からも利用できるものは利用するという形が望ましいと思う。

また、ブラウザー間での互換性や将来におけるメンテナンス性などといった後ろ向きな観点で「依存は悪」などと断ずることは容易いが、Webフォントのような数時間で概要がほぼ把握できるようなシンプルな技術にそういった観点は似合わないと思う。

FreeTypeライブラリの抱えるセキュリティ・リスクはWeb開発者が負うべきことではないので、そこらへんの話はどうでも良い。フォーマットのサポートの差異とかベンダー拡張プリフィックスの話まで広げると収拾つかなくなりそうなのでここらへんでやめよう……。