2013-08-01

unicode-rangeを使ってArialにSegoe UI Symbolを混ぜる

TwitterでUnicode6.0絵文字を表示させるためのユーザースタイルシートで快適になった。これで大体は良さそうなんだけど、unicode-rangeを使ってArialにSegoe UI Symbolを混ぜちゃうともっと安定して良さそうな気がする。

@font-face {
  font-family: "Arial";
  src: local("Arial");
}

@font-face {
  font-family: "Arial";
  src: local("Segoe UI Symbol");
  unicode-range: U+20E3-2B55, U+1F004-1F6C0;
}

絵文字のコードポイントはUnicode6.0の携帯電話の絵文字の一覧から。アバウトに範囲指定してるので、元々Arialが持っている絵文字他もかなりSegoe UI Symbolに変わる。本当はもっと細かく指定した方が良いだろうけど面倒なのでまとめてガッと指定した。

@font-face {
  font-family: "Times New Roman";
  src: local("Times New Roman");
}

@font-face {
  font-family: "Times New Roman";
  src: local("Segoe UI Symbol");
  unicode-range: U+20E3-2B55, U+1F004-1F6C0;
}

ツイートの個別ページではGeorgiaかTimes New Romanが使われるので、ついでにこうしておくとそっちでも絵文字がちゃんと表示されるようになる。