2014年8月22日

UnicodeのタイルセットをPython3とPillowで作った(2)

以前こんな記事を書きましたが、さざなみゴシックを使用するとくっきりしたフォントになりました。

スクリプトは以下の通りです。

from PIL import Image, ImageDraw, ImageFont, ImageEnhance

canvas = Image.new('1', (512, 32768))
draw = ImageDraw.Draw(canvas)

font = ImageFont.truetype('sazanami-gothic.ttf', 14)

for i in range(0,65535+1):
    gyou = i // 32
    retu = i % 32
    draw.rectangle([retu*16, gyou*16, retu*16+16, gyou*16+16], '#000')
    draw.text((retu*16, gyou*16), chr(i), font=font, fill='#fff')

alf = canvas.crop((0, 32640, 0+512, 32640+16*3))
canvas.paste(alf, (0, 16))

canvas.save('text_img.png', 'PNG', quality=100, optimize=True)

タイルセットの画像ファイルはこちらです。(ライセンス準拠のため元のフォントとライセンスを同梱しています。リンク先画面上部のメニューからzipファイルをダウンロードしてください。)

2014年8月6日

ブラウザでフォントを強制するとアイコンがおかしくなる

最近はフォントを利用してアイコンを表示するサイトが増えてきました。例えばtumblrやAol readerがそうです。しかし、ブラウザのフォントの設定で、例えばメイリオで描画するよう強制していると、こうしたフォントが文字化けすることになります。

この問題の解決方法は、フォントの設定でWebページが指定したフォントを優先するようにすることです。フォントを強制する拡張機能があれば削除しましょう。

問題は、この問題を解決しつつ、気に入ったフォントを使用するにはどうするかですが、スタイルシートを使って、MSPゴシックなどをメイリオなどに置き換えればいいわけです。この方法についてリンクをいくつか紹介させていただきます。

Firefox用
Chrome用

Firefoxの方はこちらで動作確認していますが、Chromeは仕様変更がけっこう激しいので違う方法を検索する必要があるかもしれません。あるいはSleipnirを使うのも良い手かも。

2014年8月4日

UnicodeのタイルセットをPython3とPillowで作った

 
以前書いた「libtcod + pythonで日本語を表示 」では、Unicodeのタイルセット(文字が文字コードの順に並んだ画像。フォントテクスチャとかビットマップフォントという人もいるかもしれません)を使用しました。

使用したfont.pngは、GNU Unifontをベースにしたものでしたが、字体や行間などの点で、やや使いにくい感じはありました。

そこで、このフォーマットのタイルセットをPython3と、Pillowライブラリを使って作ってみました。

スクリプトは以下の通りです。

from PIL import Image, ImageDraw, ImageFont, ImageEnhance

canvas = Image.new('RGB', (512, 32768), (0, 0, 0))
draw = ImageDraw.Draw(canvas)

font = ImageFont.truetype('mplus-1m-medium.ttf', 14)

for i in range(0,65535+1):
    gyou = i // 32
    retu = i % 32
    draw.rectangle([retu*16, gyou*16, retu*16+16, gyou*16+16], '#000')
    draw.text((retu*16, gyou*16), chr(i), font=font, fill='#fff')

ehc = ImageEnhance.Contrast(canvas)
fin = ehc.enhance(1.25)

fin.save('text_img.png', 'PNG', quality=100, optimize=True)

スクリプトと同じフォルダにM+フォント(mplus-1m-medium.ttf)を置き、実行するとこのような(※)pngファイルが生成されます。

しかし、実際に使ってみると位置がずれているなど、やや問題があります。まあ、でも使えないことはありません。

(※)ライセンスはM+フォントに準ずる

(追記)続きを書きました。