読者です 読者をやめる 読者になる 読者になる

MANA-DOT

PIXEL ART, PROGRAMING, ETC.

ドット絵からsvgフォントを作るプログラムを書いたよ

ドット絵 プログラミング フォント Webフォント

pixelsvg 前回作った、ドット絵からsvgを作るプログラムでは、文字を1つずつsvgとして出力するため、IcoMoonAppでWebフォントにする作業が大変でした。 なので、プログラムを回収してsvgフォントの形式でまとめた状態で出力するようにしてみました。(ソースコード)

このプログラムを実行すると、8x8のフォントから以下のようなsvgフォント形式のsvgが出力されます。

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <def>
    <font id="8x8" horiz-adv-x="1024">
      <font-face units-per-em="1024" ascent="1024" descent="0"/>
      <missing-glyph horiz-adv-x="1024"/>
      <glyph unicode="&#x20;" d="" horiz-adv-x="512"/>
      <glyph unicode="&#x30;" d="M512 896h256v-128h128v-512h-128v-128h-256v128h-128v512h128v128M640 768h-128v-512h256v512z"/>
      <glyph unicode="&#x31;" d="M512 896h128v-640h128v-128h-384v128h128v384h-128v128h128z"/>
      <glyph unicode="&#x32;" d="M512 896h256v-128h128v-256h-128v-128h-128v-128h256v-128h-512v128h128v128h128v128h128v256h-256v-128h-128v128h128z"/>
...

このsvgファイルはsvgフォントが利用可能なブラウザならそのまま利用可能ですし、IcoMoonAppで他のwebフォントの形式に変換することも出来ます。

icomoon4

svgフォントを直接読み込ませると、

icomoon3

このようにすべての文字が読み込まれます。

icomoon5

文字コードも設定された状態なので、Downloadを押せばそのまま他の形式のフォントを取得できます。

前回作っていなかった伸ばし棒やカッコも利用できるようになりました。

「ぬわーっ」

おまけ

また、次のようなJSONファイルを用意することで、任意のドット絵をsvgフォントとして出力できるようにしました。

{
    "img": "8x8.png",
    "size": 8,
    "name": "8x8",
    "map": [
        "1234567890!?.,。、ゃゅょャュョ()「」",
        "abcdefghijklmnopqrstuvwxyz",
        "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
        "あいうえおかきくけこさしすせそたちつてとなにぬねのっ",
        "はひふへほまみむめもやゆよらりるれろわをんぁぃぅぇぉ",
        "がぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽー",
        "アイウエオカキクケコサシスセソタチツテトナニヌネノッ",
        "ハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォ",
        "ガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポ"
    ]
}

ドット絵でフォントを作りたい奇特な方はどうぞご利用ください。githubにおいてあります。