Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

COLRv1

COLRv1はCOLRv0の進化版で、グラデーション（線形・放射状・円錐）、アフィン変形、ブレンドモードなどの高度な描画機能をサポートします。より豊かな表現力を持つ絵文字やアイコンフォントの作成が可能で、ベクターベースのため解像度に依存しません。ただしSafariでは未サポートです。

カラーフォントグラデーション

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.font-face.OpenType_COLRv1
98
98
107
98
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
@font-face {
  font-family: 'RichIcons';
  src: url('icons-colrv1.woff2') format('woff2');
}
.emoji {
  font-family: 'RichIcons';
}

ライブデモ

col-font

CSS col-font demo.

プレビュー全画面表示

palettetoggle

CSS palettetoggle demo.

プレビュー全画面表示

Resize

CSS Sizechange demo.

プレビュー全画面表示

実務での使いどころ

  • 高品質なカスタム絵文字フォント

    グラデーションやブレンドモードを活用した高品質なカスタム絵文字やブランドアイコンフォントを作成できます。

注意点

  • Safariでは未サポートのため、フォールバックフォントまたはCOLRv0版の提供が必要です。

アクセシビリティ

  • カラーフォントは視覚的にリッチですが、スクリーンリーダーには通常のテキストとして読み上げられます。絵文字の場合は適切なaria-labelを検討してください。

参考リンク