Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

COLRv0

COLRv0 フォント形式は、絵文字やアイコンフォントで複数の色を使ったグリフ（文字図形）を表現できます。各グリフを色付きレイヤーの重ね合わせで構成し、単色では表現できないリッチなフォントデザインを可能にします。すべての主要ブラウザでサポートされており、カラフルなアイコンフォントの実装に実用的です。

カラーフォントフォント形式

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
OpenType COLRv0
53
79
31
11.1
53
11.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
@font-face {
  font-family: 'ColorIcons';
  src: url('icons-colrv0.woff2') format('woff2');
}
.icon {
  font-family: 'ColorIcons';
}

ライブデモ

カラーフォント概念

CSS の カラーフォント概念 パターンです。

プレビュー全画面表示

レイヤー構造

CSS の レイヤー構造 パターンです。

プレビュー全画面表示

絵文字の例

CSS の 絵文字の例 パターンです。

プレビュー全画面表示

実務での使いどころ

  • マルチカラーアイコンフォントの利用

    COLRv0形式のフォントを使って、複数色のアイコンをテキストとして扱い、サイズ変更やCSSスタイリングが容易なカラーアイコンを実装できます。

注意点

  • COLRv0はソリッドカラーのみ対応で、グラデーションやブレンドモードが必要な場合はCOLRv1を検討してください。

アクセシビリティ

  • カラーフォントのグリフが色情報のみで意味を伝えている場合、色覚異常のユーザーへの配慮としてテキストラベルも併用してください。

参考リンク