ベクターアイコン
ウェブコンテンツのアクセントになるアイコンは、Web フォントで提供し、動的 SVG でフォールバックする。これ以前は、Pure CSS Icon で提供されていました。しかし、もっさり感が耐えられなくなり、標準的な手段を採用しました。
一方で、現在はインライン SVG による実装が主流のようです。この手法は、SVG に非対応な非力なブラウザに、大量のマークアップをダウンロードさせてしまうことになるため、私はウェブ文書向けのプロジェクトでは採用しません。
IE, Safari, Samsung, Netscape, Android, Apple, Browser, Chrome, Edge, Firefox, Github, Linux, Opera, Samsung, Twitter, Windows, YouTube ⚙, 🏛, 🏠, 🏳, 🏷, 👤, 💬, 💽, 📅, 📻, 🔗, 🖊
簡易テスト
Data URI フォントのテスト も併せて確認のこと。
| WOFF2 | WOFF | TTF | OTF | EOT | SVG | ||
|---|---|---|---|---|---|---|---|
| <link> | 🕊 | 🕊 | |||||
| Github | | ||||||
| test | -mli | ||||||
| <style> + Data URI | -mli | -mli | -mli | -mli | -mli | -mli | |
| <style> | 🕊 | 🕊 | 🕊 | 🕊 | 🕊 | 🕊 | 🕊 |
| Github | | | | | | | |
| test | -mli | -mli | -mli | -mli | -mli | -mli | |
- application/x-font-woff; application/font-woff;
ベクターアイコン + Data URI
SVGをdataURLでCSSに埋め込み この方法では、対応ブラウザがかなり狭くなる。base64 の方が対応ブラウザは広い。
8. テストページ
オールキャストページ