画期的なカラー絵文字フォント（SCAlleSnowman）を作ってみた

過ぎ行く夏の思い出に耽るには、ゆきだるま☃︎（特にカラーのやつ）を使った文書を作るのが一番である。周知の通り、LaTeX で文書を作るのであれば、画期的な scsnowman パッケージを利用すると、文書にカワイイ☃︎を簡単に入れられる。

% pLaTeX文書
\documentclass[dvipdfmx,a4paper]{jsarticle}
\usepackage{scsnowman}% カラーゆきだるま！
\begin{document}
来年は、もっともっと素敵な
\scsnowman[hat,arms,snow,buttons,muffler=red]ネタに
出会えますように！
\end{document}

しかし、文書を HTML で作りたい、という場合は話はそんなに簡単ではない。この場合、☃︎のカラー絵文字を使えばいいのであるが、しかし Windows の標準のカラー絵文字フォントの「Segoe UI Emoji」では、☃︎の絵文字がチョットアレなのである。

f:id:zrbabbler:20170831163501p:image:w200

代わりに、Twemoji などの「絵文字画像」を使うという手もあるが、多少面倒であるし、何よりも、scsnowman の熱狂的なファンであれば「scsnowman のカワイイ☃︎でないと納得できない」と考えるのも当然である。

“あの”ゆきだるまが HTML で使えるよ！

というわけで、作ってみた。

SCAlleSnowman （GitHub/zr-tex8r）

この中にある SCAlleSnowman.ttf が「ゆきだるま☃︎のカラー絵文字フォント」である。これを WIndows にインストールした上で、CSS の font-family に「SCAlleSnowman」を指定すると、「scsnowman の☃︎」が入った HTML 文書ができあがる。

<!DOCTYPE html>
<html><head><title>hoge</title>
<meta charset="UTF-8">
<style>
body { font-family: 'SCAlleSnowman', 'Yu Mincho', sans-serif; }
</style>
</head>
<body>
<p>雪あり→☃／雪なし→⛄</p>
<p>来年は、もっともっと素敵な☃ネタに出会えますように！</p>
</body></html>

フォント指定のポイント

SCAlleSnowman は〈☃︎〉（U+2603）と〈⛄︎〉（U+26C4）のみを含むフォントである。従って、CSS の font-family 指定において、'SCAlleSnowman' を先頭に追加することで、「他の文字には影響を与えずにこの 2 文字のみフォントを変更する」ことができる。

[CSS 指定]

/* ☃︎はSCAlleSNowman、それ以外は游明朝 */
body { font-family: 'SCAlleSnowman', 'Yu Mincho', sans-serif; }

[HTML 本文]

<p>8月は☃。</p>

非カラーなゆきだるま

SCAlleSnowman の☃︎は既定ではカラー絵文字になるが、☃︎の後にテキスト異体字セレクタ（text variation selector = VS15 = U+FE0E）を置くと白黒の☃︎に変わる。

[HTML 本文]

<!-- 敢えて実体参照形式で記述した -->
<p>☃は素敵、☃&#xFE0E;も素敵。</p>

非マフラーなゆきだるま

OpenType 属性の Style Set 1（ss01）を指定するとマフラー無しの☃︎になる。

[HTML 本文]

<p>☃は素敵、
<span style="font-feature-settings:'ss01'">☃</span>も素敵。</p>

マフラーの色を変える

同様に、OpenType 属性の Style Set 2〜6（ss02〜ss06）を指定すると様々な色のマフラーの☃︎が表示される。（ただし ss02 は既定と同じになる。）

<p><span style="font-feature-settings:'ss02'">☃</span>は素敵。
<span style="font-feature-settings:'ss03'">☃</span>も、
<span style="font-feature-settings:'ss04'">☃</span>も、
<span style="font-feature-settings:'ss05'">☃</span>も、
<span style="font-feature-settings:'ss06'">☃</span>も素敵。</p>