COLRv1

概要

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

対応ブラウザ

基本構文

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

実務での使いどころ

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — COLRv1
• Can I use — COLRv1