最近はWebフォントが人気です。アイコンのように使ったり、ロゴのように使うこともできます。しかし基本的にWebフォントはTrueType Fontなどのファイルを用意しておいて使われているでしょう。 もっとWeb Fontをダイナミックにプログラマブルに扱おうというソフトウェアがPlumin.jsです。動的にWeb Fontを作成できるソフトウェアです。

Plumin.jsの使い方

こちらは実行前。

実行後。a/i/oが変わっています。

文字の太さを動的に変更することもできます。

ちょっと太く。

さらに太く。

使い方としてはこんな感じです。

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
    });

動的に特定の文字に対してフォントを生成しています。文字の太さを指定しています。このDemoというフォントセットを動的に生成して描画に当てはめるという仕組みです。フォントを動的に、というアイディアが面白いですね。

Plumin.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Plumin.js | Create and manipulate fonts using javascript byte-foundry/plumin.js