WindowsのChromeでのUnicode6.0絵文字

Windowsの少なくともChrome 30までではUnicode6.0の絵文字がだいたい表示されず豆腐(□みたいなの)に化ける。理由はDirectWriteじゃなくてFontLinkに対応してないとか、デフォルトのフォールバックでUnicode6.0絵文字を含むフォントが指定されていないとかそんな感じなんじゃないかと憶測している。本体がDirectWriteに対応するまでどうにかなるとは思えないのでユーザースタイルシートでどうにかした。

Unicode 6.0絵文字はSegoe UI Symbolに全部含まれるので、これが使われるようにユーザースタイルシートを書いてやる。Twitterを例にすると、

.tw-tweet {
  font-family: "Arial", "Segoe UI Symbol", sans-serif;
}

で、🍣とか🍶とかがちゃんと表示されるようになる。

Segoe UI Symbolには幅ゼロなので重ねられるグリフとかも色々あってWindowsではいろいろ遊べる。こういう幅ゼロで重ねられるアイコン・フォントを作って多色アイコンを作るみたいな試みはウェブでもそろそろ流行りそうな気配ある。