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

 

おわり

文字コード
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。WEBエンジニア。

技術スタック:TypeScript/Next.js/Express/Docker/AWS

フォローする
フォローする
penpenメモ

コメント

  1. 通りすがり より:

    絵文字を駆使しようとしてハマっていたので勉強になりました。ありがとうございます。

タイトルとURLをコピーしました