iPhone絵文字をPCやAndroidでも表示できるEmojiSymbolsを導入

ウェブサイトにユーザーが投稿した文章の中にiPhone絵文字が含まれていると、PCのブラウザやAndroidで見た時に文字化けして残念なことになります。それをWebフォントを使って解決する方法です。

EmojiSymbols
http://emojisymbols.com/jp/

絵文字用Webフォントです。これをダウンロードしてサーバに設置しておきます。

/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
@font-face {
  font-family: emojisymbols;
  src: url("/webfonts/EmojiSymbols-Regular.woff");
}
body, html {
  font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'sans-serif', 'Apple Color Emoji', 'emojisymbols';
}

font-familyの前半はお好みで。ポイントはemojisymbolsの前にApple Color Emojiを入れることです。こうすることでiPhoneではカラー絵文字が、それ以外ではEmojiSymbolsが表示されます。

-- 追記 --
Android2.xでは反映されず。ttfでないと無理？
Android4.xでは他のフォントで表示できる絵文字が同一文章に含まれているとEmojiSymbolsが表示されない現象が発生。
四角の中に数字が入ってるような絵文字はPCでは「3□」、Androidでは「3」のように表示されてしまう。
当然ながらページタイトルに絵文字があると文字化けします。