Unicode麻雀牌のテスト

2019/03/02Web

Unicodeには麻雀牌の絵文字も含まれているのは知る人ぞ知る話なのですが、それを使って画面表示しようとするとフォントの違いでハマります。例えば、MacOSで素直に表示するとなぜか中だけ違う雰囲気に。

MacOS Safari, “font-family: sans-serif;"

どうやら携帯電話(ガラケー)時代に麻雀を意味する絵文字として“中”だけが存在していて、後にUnicodeに収録されるときに残りの文字が追加されたのが違いの原因のようです。

Windowsだと懐かしのファミコンっぽいフォントになります。これはこれで味はあるけど、ちょっとおもちゃっぽい。

Windows10 Chrome, “font-family: sans-serif;"

これでは闘牌シーンをブログで書けないので、フォントを指定して頑張ってみました。以下そのテスト表示。

各種フォントを指定してみました

機種によってフォントが違うので見え方も違うと思います。そもそも麻雀牌が収録されていないフォントもあります。古いスマホで問題になりそう。

font-family: sans-serif;

🀇🀏🀐🀘🀙🀡🀀🀁🀂🀃🀄🀅🀆  🀄(ツモ)

font-family:’Apple Symbols’;

🀇🀏🀐🀘🀙🀡🀀🀁🀂🀃🀄🀅🀆  🀄(ツモ)

font-family:’Segoe UI Symbol’;

🀇🀏🀐🀘🀙🀡🀀🀁🀂🀃🀄🀅🀆  🀄(ツモ)

font-family:’Segoe UI Emoji’;

🀇🀏🀐🀘🀙🀡🀀🀁🀂🀃🀄🀅🀆  🀄(ツモ)

font-family: 'Noto Sans JP’, sans-serif;

🀇🀏🀐🀘🀙🀡🀀🀁🀂🀃🀄🀅🀆  🀄(ツモ)

以下、追加(2022/10/12)

font-family: 'Yu Gothic Medium’,’游ゴシック Medium’,’YuGothic’,’游ゴシック体’, sans-serif;

🀇🀏🀐🀘🀙🀡🀀🀁🀂🀃🀄🀅🀆  🀄(ツモ)

font-family: 'BIZ UDゴシック’,’BIZ UDGothic’, sans-serif;

🀇🀏🀐🀘🀙🀡🀀🀁🀂🀃🀄🀅🀆  🀄(ツモ)

font-family: Roboto, sans-serif;

🀇🀏🀐🀘🀙🀡🀀🀁🀂🀃🀄🀅🀆  🀄(ツモ)

font-family: 'Noto Sans CJK JP’, sans-serif;

🀇🀏🀐🀘🀙🀡🀀🀁🀂🀃🀄🀅🀆  🀄(ツモ)


Android や iPhoneでも試してみましたが、共通して使えそうな綺麗なフォントは無さそうです。わざわざこのためにWebフォントを使うのも面倒なので、どうしたものかお悩み中。

麻雀画像作成ツール

結局、画像を使って表示するのが現在のところは無難な表示方法のようです。いくつかツールが存在します。画像表示だと手軽さに欠けるんだよな。

Web

Posted by ず@沖縄