🗽 Webで絵文字を使う

2021/7/26

🗽 Webで絵文字を使う  最近、Web 上でカラフルな絵文字が目につくようになりました。 そこで、私も Web ページの見出しなどに少し使ってみました。 PC の Google Chrome で表示される文字のデザインはスマホの Android で表示されるそれと違うようです。
 ──一体どう使うのがいいのだろう?
この文章は、このことについて考えてみたメモです。


 Google Fonts というものがあり、ホームページ上で、あまり何も考えず使えます。 使いたいフォントを選び(Quahiriとします)、横に出る[Select this style]をクリックすると、link, CSS といったソースが出るので、それをコピーし、次のように、使いたいページにセットします。

<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=Qahiri&display=swap" rel="stylesheet">
<style>
.myfont {font-family: 'Qahiri', sans-serif;}
</style>

その上で、このフォントを使いたい箇所に、次のように書きます。

<div class="myfont">Almost before we knew it, we had left the ground.</div>

 そうすると、Webページに次のようなフォントが現れます。

google fonts

 自分がそのフォントを持っていなくても、サーバ上にフォントを置かなくても、ホームページ上で完結するフォントの指定方法で、もちろん、Japanese を指定して探せば、Kosugi フォントなど、きれいなフォントを使うことができます。 しかし、残念ながら、絵文字専用フォントはないようです。

 きれいな絵文字をホームページで使いたいと思ったとき、次のような方法を見つけました。 まず、ページの CSS に次のように書きます。

@font-face {
  font-family: MyFontFamily;
  src: local("Hiragino Kaku Gothic ProN"),
       local("Meiryo");
}

@font-face {
  font-family: MyFontFamily;
  src: local("Segoe UI Emoji"),
       local("Segoe UI Symbol"),
       local("Apple Color Emoji"),
       local("Noto Color Emoji"),
       local("Noto Emoji");
  unicode-range: /*U+23, U+2A, U+30-39,*/ U+A9, U+AE, U+200D, U+203C, U+2049, U+20E3, U+2122, U+2139, U+2194-2199, U+21A9-21AA, U+231A-231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA, U+24C2, U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-2604, U+260E, U+2611, U+2614-2615, U+2618, U+261D, U+2620, U+2622-2623, U+2626, U+262A, U+262E-262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267B, U+267F, U+2692-2697, U+2699, U+269B-269C, U+26A0-26A1, U+26AA-26AB, U+26B0-26B1, U+26BD-26BE, U+26C4-26C5, U+26C8, U+26CE-26CF, U+26D1, U+26D3-26D4, U+26E9-26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702, U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728, U+2733-2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757, U+2763-2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+2934-2935, U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297, U+3299, U+FE0F, U+1F004, U+1F0CF, U+1F170-1F171, U+1F17E-1F17F, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201-1F202, U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250-1F251, U+1F300-1F321, U+1F324-1F393, U+1F396-1F397, U+1F399-1F39B, U+1F39E-1F3F0, U+1F3F3-1F3F5, U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E, U+1F550-1F567, U+1F56F-1F570, U+1F573-1F57A, U+1F587, U+1F58A-1F58D, U+1F590, U+1F595-1F596, U+1F5A4-1F5A5, U+1F5A8, U+1F5B1-1F5B2, U+1F5BC, U+1F5C2-1F5C4, U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3, U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5, U+1F6CB-1F6D2, U+1F6E0-1F6E5, U+1F6E9, U+1F6EB-1F6EC, U+1F6F0, U+1F6F3-1F6F8, U+1F910-1F93A, U+1F93C-1F93E, U+1F940-1F945, U+1F947-1F94C, U+1F950-1F96B, U+1F980-1F997, U+1F9C0, U+1F9D0-1F9E6, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}

html {
  font-family: MyFontFamily, sans-serif;
}

 unicode-range のところはややめんどうですが(絵文字の範囲を指定しているので、やらないと絵文字以外も MyFontFamily が優先され、表示に難が生ずる)、こうさえすれば、普通の文字は普通のフォントで、絵文字はきれいな絵文字で表示されます。 ただ、残念ながら、ボールド体を指定するような h1-h6 などのタグはだめです。 「参考2」にあるように、font-weight: bold の設定をやってみましたが、私のスマホでは☓でした。

 そこで、逆転の発想で、絵文字を使うときは、bold の指定を外せばいい、と思いました。 つまり、

<h2>絵文字を入れる<span class="emoji">😀</span></h2>

 このためにはあらかじめ、CSSに次のような記述が必要です。

.emoji { font-weight: normal; }

 こうしておくと、下のように表示されます。

絵文字

 めでたし、めでたし🙃

 この原理はたぶんこういうことでしょう。

PCもスマホも、内部にきれいな絵文字フォントを持つ時代になった。
しかし、ホームページは、それらの絵文字フォントを優先して使う状態になっていない。
そこで、Segoe UI Emoji(Windows)、Apple Color Emoji(Mac)、Noto Color Emoji(Android, Linux) などの絵文字フォントを優先して使うよう、CSS にセットする。
そうすると、きれいなカラー絵文字がホームページ上に表示されるようになる……。

 そして、OSや環境で例えば「😀」という絵文字がどのように表示されるかは Emojipediaを見ると正確にわかる、ということのようです。 Desktop Computer の絵文字を見ると、Apple は Mac 風モニタに、Microsoft は一般的なモニタに図案化されているので笑ってしまいます。

参考: Google Fonts の使い方や利用方法

参考2: 絵文字を含むテキストを表示する

参考3: Google 提供の Noto Color Emoji 一覧

twitterシェア Facebookシェア
  コメントの注意点