COLRv0
COLRv0 フォント形式は、絵文字やアイコンフォントで複数の色を使ったグリフ（文字図形）を表現できます。各グリフを色付きレイヤーの重ね合わせで構成し、単色では表現できないリッチなフォントデザインを可能にします。すべての主要ブラウザでサポートされており、カラフルなアイコンフォントの実装に実用的です。
概要
COLRv0 フォント形式は、絵文字やアイコンフォントで複数の色を使ったグリフ（文字図形）を表現できます。各グリフを色付きレイヤーの重ね合わせで構成し、単色では表現できないリッチなフォントデザインを可能にします。すべての主要ブラウザでサポートされており、カラフルなアイコンフォントの実装に実用的です。
対応ブラウザ
デスクトップ
Chrome 53+
Edge 79+
Safari 11.1+
Firefox 31+
モバイル
Chrome Android 53+
Safari iOS 11.3+
Firefox Android 31+
基本構文
CSS
@font-face {
font-family: 'ColorIcons';
src: url('icons-colrv0.woff2') format('woff2');
}
.icon {
font-family: 'ColorIcons';
}実務での使いどころ
-
マルチカラーアイコンフォントの利用
COLRv0形式のフォントを使って、複数色のアイコンをテキストとして扱い、サイズ変更やCSSスタイリングが容易なカラーアイコンを実装できます。
注意点
- COLRv0はソリッドカラーのみ対応で、グラデーションやブレンドモードが必要な場合はCOLRv1を検討してください。
アクセシビリティ
- カラーフォントのグリフが色情報のみで意味を伝えている場合、色覚異常のユーザーへの配慮としてテキストラベルも併用してください。