前回までは一般のフォントを読んでみた。それではカラーフォントはどうやって実装するのだろうか？

　現状（2023年現在）大きく３つの方法が採用されているようだ。

• 画像を埋め込む (sbixテーブルを使う）　→　Apple Emoji

• SVGを埋め込む(SVGテーブルを使う）　→ Noto Color Emoji

• GLYF + COLRテーブルを使う →　Microsoft Emoji

sbix

　一番簡単な、sbixを読んでみようと思う。

　このフォントは、PNG、JPEGがそのまま埋め込んであるだけ。ただし画像埋め込みなので表示に最適化された画像がいくつか埋め込まれている（Strikes）。そこから最適な画像を取り出し、スケーリングして表示することになる。この値は、ppem(Pixcel per em)とppi(pixel per inch)で指定されているのでディスプレイのDPI値を取得しないと正確な計算が出来ない。面倒な場合は、Windows標準の96DPIをそのまま使う方法がある。この場合、ptを1.5倍すれば適当なppemが計算出来る。16ptなら24px。

　各strikesの下に、GlyphIDに対応した画像が埋め込まれている

svg

　SVGは文字通りSVGがそのままフォントファイルに埋め込んである。Noto Color Emojiはtextで埋め込まれていたが、ZGIP圧縮されている可能性がある。しかしこのSVGファイルがくせ者で、下手すると1つのSVGファイルに1000以上の文字が埋め込んである。つまり真面目にHTMLに書き出そうとするとSVGを解析して必要な部分だけ抽出する作業が必要になる。これはフルスペックのSVGのXML Parserを実装をするのと同じ手間がかかる。

　手抜きするなら以下のやり方がある

<SVG>
  <USE HREF="emoji.svg#glyph3676" />
</SVG>

　ものすごく重いのでおすすめしない。

GLYF + COLRテーブル

　GLYFテーブルを使った方法になる。COLRテーブルを使わない場合は、通常のモノクロのフォントになる。COLRテーブルにはレイヤー情報が入っており（グラデーションも可能）レイヤー単位に塗りつぶす。実際に塗りつぶす色はCPALテーブルに格納されている。

　この方法の利点はOpenTypeを拡張するだけで実装が可能になる。その反面、複雑な図形が実装しにくい。