JavaScriptでフォントを作る

Plumin.jsを使うとJavaScriptでフォントを作ることができます。

公式サイトからの引用ですが、 a,i,oの文字を定義して差し替えるサンプルです。

フォントそのものはPaper.jsという図形描画用の記述で、好きな図形を文字にできるようです。 (パス描画のドキュメントはこちら)

Paper.js — Path

実際の動作例は公式サイトをご覧ください。

(function(p) { 

var font = new p.Font({ 
        familyName: 'Demo', 
        ascender: 800, 
        descender: -100 
    }), 
    // 文字の大きさを設定？ 
    a = new p.Glyph({ 
        name: 'a', 
        unicode: 'a', 
        advanceWidth: 496 
    }), 
    i = new p.Glyph({ 
        name: 'i', 
        unicode: 'i', 
        advanceWidth: 268 
    }), 
    o = new p.Glyph({ 
        name: 'o', 
        unicode: 'o', 
        advanceWidth: 536 
    }), 
    shape; 

// a contour 
// 多角形(▲)を描く 
shape = new p.Path.RegularPolygon({ 
    center: [268, 124], 
    sides: 3, 
    radius: 248 
}); 
shape.rotate(180, [268, 124]); 
shape.scale(1, 1.4, [268, 0]); 
a.addContour(shape); 

// i contour 
// 長方形を描く 
shape = new p.Path.Rectangle({ 
    point: [60, 0], 
    size: [140, 500] 
}); 
i.addContour(shape); 

// o contour 
// 楕円を描く 
shape = new p.Path.Ellipse({ 
    point: [50, 0], 
    size: [436, 510] 
}); 
o.addContour(shape); 

font.addGlyphs([ a, i, o ]); 
font.updateOTCommands() 
    .addToFonts(); 

})(plumin.paper);