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生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

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

コメント

  1. 通りすがり より:

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

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