CSSでの絵文字フォントの指定【Emojipediaから学ぶ】

絵文字を表示させるCSSでのフォントの指定方法ってよくわかんねーな～

と思って調べてみたけどいまいち良く分からない。

 

そんなときにひらめいた。

 

絵文字界隈でWikipedia的存在である「Emojipedia」の絵文字フォントのCSSでの指定方法をマネすればいいんでね？

と。

 

というわけで早速調べてみると、Emojipediaでは絵文字のフォントは以下のように指定されていた。

font-family:
apple color emoji,
segoe ui emoji,
noto color emoji,
android emoji,
emojisymbols,
emojione mozilla,
twemoji mozilla,
segoe ui symbol;

（上から優先的に使用され、最終的に使用されるのはsegoe ui symbolらしい）

 

順番に見ていくと、以下のような感じ。

• apple color emoji
  →macOS/iOS系の端末で使う絵文字フォント

• segoe ui emoji
  →Windows10の端末で使う絵文字フォント

• noto color emoji
  →Android系の端末で使う絵文字フォント

• android emoji
  →旧Android系の端末で使う絵文字フォント（？） 

• emojisymbols
  →絵文字のウェブフォント（なぜわざわざウェブフォントを指定しているのだ･･？） 

• emojione
  →絵文字のウェブフォント（なぜわざわざウェブフォントを指定しているのだ･･？） 

• mozilla
  →Firefox OS用のフォント（？） 

• twemoji mozilla
  →Firefox OS用のフォント（？） 

• segoe ui symbol
  →Windows10以前の端末で使う絵文字フォント

 

（？）と書いている部分は自信がありません。
詳しい方がいればコメントで教えて頂けるとうれしいです。

 

逆に絵文字以外の部分は、以下のような感じだった。

font-family: 
helvetica neue,
Helvetica,
Arial,
sans-serif;

• Macでは･･･安定のhelvetica
• Windowsでは･･･Arial
• 最悪･･･sans-serif

 

おわり