マクロツイーター

はてダから移行した記事の表示が崩れてますが、そのうちに直せればいいのに(えっ)

画期的なカラー絵文字フォント(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」では、☃︎の絵文字がチョットアレなのである。

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

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

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

この中にある 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>

まとめ

scsnowman の☃︎は HTML で使っても素敵。


補足:Windows でない場合

実は、SCAlleSnowman は「Microsoft 方式のカラーフォント」である。現状では、OS レベルでこの方式に対応しているのは Windows(10?)だけなので、他の OS 上のブラウザで見た場合は、☃︎は常に白黒で表示されてしまう。(残念……。)

ただし、FirefoxMicrosoft 方式のカラーフォントを自前でサポートしているので、素敵なカラーの☃︎が表示できる。なので、夏の思い出に浸りたい非 Windows 者は是非とも Firefox を使おう。