前回作った、ドット絵から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フォントの形式に変換することも出来ます。

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

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

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

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

｢ぬわーっ｣

おまけ

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

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

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