2022年末に主要ブラウザで使えるようになった「font-palette-values」を用いると、カラーフォントの色を自在に変更することが出来ます。
日時のうち、時刻部分にはfont-palette-valuesが適用されています。文字色変更を押すと時刻の文字色が切り替わります。カラーフォントは無償配布中のなにセグを使用しています。
@font-palette-valuesで「--brown」という名称で色情報上書き用のフォントパレットを作成し、font-paletteにて作成したフォントパレットを指定することでカラーフォントの文字色を変更しています。
「なにセグ」はカラーパレットを1種類のみ内蔵しているため、base-paletteで0を指定しています。override-colorsで既存の色情報を上書きしています。なにセグの場合、0に消灯部分の色、1に点灯部分の色を格納しています。
@font-face {
font-family:"Naniseg";
src: url("./file/Naniseg.ttf") format("truetype");
}
@font-palette-values --brown {
font-family: "Naniseg";
base-palette: 0;
override-colors:
0 #f0f0f0,
1 #993300;
}
.result{
font-size:72pt;
font-family: "Naniseg";
font-palette: --brown;
}カラーフォントは日本の携帯電話(ガラケー)から生まれた絵文字をスマートフォン等のデバイスでもカラーで表示するために実装された技術です。カラーフォントには4つの方式がありますが、font-palette-valuesが使えるものはCPALを用いて色情報を保持するカラーフォント(主に「COLR/CPAL」方式を採用したフォント)のみのようです。
カラーフォントの色を微調整したい場合に役立ちます。ダークモードの場合はカラーフォントは変に目立ってしまうので色を抑えたいときには活躍するでしょう。
もっとも、2022年現在Google Fontsでもカラーフォントはごくわずかです。フォントは技術革新の普及ペースがゆるやかなので、対応フォントの選択肢が増えるのは相当先になると思われます。さらに、絵文字フォントの場合だと使用している色数も膨大であるため、ひとつひとつ色を指定するのもあまり現実的ではありません。実務ではカラーフォントが内蔵しているパレットを「font-palette」指定して使用することになると予想しています。