絵文字のWebページ入れ込みは環境依存がすごい！！
最近、Webサイト制作をしていて、
Webサイトに絵文字を入れ込んで欲しいとの要望をいただいた。
今、絵文字は普通にHTMLで読み込むようです。
🤛👶🐱😄✅
こんな感じです。普通に絵文字打つと反映されます。
こんな簡単に絵文字行けるのか！と思った矢先。
Webサイトの絵文字は環境依存する！！
開くブラウザによって差があるし（隙間が空いたりする）、
アンドロイドで開くと全く違う絵文字に変換されています。
アンドロイドなどは全く違う絵文字が出力される。
例 Firefoxだと右に隙間がなく絵文字が詰まる
それ以外にも、アンドロイドで
✅→✔（こんなような絵文字）に変換されていたりしました。
これは、本当何があるかわかりませんね・・・・😅
絵文字の環境依存の回避方法
1、Font Awesomeを使う
この環境依存がわかった時
やはり、Font Awsomeはありがたいな〜と思いました。
一つ目はFont Awsomeを使う方法です。
結構な量の絵文字のようなものが無料で使えるので、本当に便利です。
さらに、YouTubeのアイコンなどがあるのもありがたいです。
文字として扱うので、文字にかかるcssがかかるのもありがたいです。
ただ、文字として並べて入れ込むと隙間がないです。
Font Awsome例
こんな感じ
2、画像として書き出してimgとしてサイトにのせる
フリーのアイコン・絵文字などはたくさん出回っているのでそれをダウンロードして使うのもありです。
デメリットとしてはcssまたはフォトショップなどでのサイズ調整が必要ということ。
その分メリットとしては、相当な種類のフリーのアイコンサイトがありますので、
最高にマッチするアイコンを追加できる可能性があるということですかね。
種類が相当あるのでこのサイトはオススメです。
というわけで、webサイト製作の際は絵文字の挿入に御用心。
絵文字はどんな環境依存があるかわからないので
避けることをオススメします。