Noto Emojiフォントを使用してAndroidの絵文字を表示する

Noto Emoji は、Unicodeで定義されている絵文字のフォント。 絵文字のデザイン（見た目）は、基本的にAndroid OSで使用されているものと同じ。

GitHubに Noto Emoji というフォントが公開されており、Googleフォントで利用できるようになっている。

以下のような使い道がある。

• Windows PCなど絵文字の対応が不十分な環境で絵文字を正しく表示する。
• WindowsやiOSなど別の環境でAndroidの絵文字を表示する。

また、X（旧Twitter）が公開しているTwemojiという絵文字及びAPIもあるが、バージョン14.0.2（2022年3月31日）で更新が止まってしまった。 その代替として使用することもできる。

Webフォントなのでインストールする必要はない。 Googleフォントを利用して簡単にウェブサイト上に絵文字を表示できる。

Noto Emoji（白黒）とNoto Color Emoji（カラー）があり、ここでは後者を使い説明する。

Noto Color Emoji にアクセスしてコードを取得する。

まず、Noto Color EmojiのCSSを読み込む。 以下は、HTMLのhead要素内に記述する例。 Googleフォントのコードには preconnect が2つあるが、これらは書かなくても動作する。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">

以下はstyle要素内に記述する場合。

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
</style>

次に、HTMLに絵文字を書く。 font-family で「Noto Color Emoji」を指定する。 ここではstyle属性に記述しているが、classを定義して別途CSSに記述しても良い。

<div>🍟</div>
<div style="font-family:'Noto Color Emoji'">🍟</div>

指定した範囲のみ Noto Color Emoji に変換される。

絵文字は 🍟 のような文字参照で書いても変換できる。

以下表示例。

素の状態（環境によって見た目が異なる）
🍟

Noto Color Emoji
🍟

なお、Unicodeに新しく追加された絵文字などにはまだ対応しておらず、変換できない絵文字もある。 今後のアップデートで対応すると思われる。