ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近はWebフォントが人気です。アイコンのように使ったり、ロゴのように使うこともできます。しかし基本的にWebフォントはTrueType Fontなどのファイルを用意しておいて使われているでしょう。

もっとWeb Fontをダイナミックにプログラマブルに扱おうというソフトウェアがPlumin.jsです。動的にWeb Fontを作成できるソフトウェアです。

Plumin.jsの使い方

こちらは実行前。
こちらは実行前。

実行後。a/i/oが変わっています。
実行後。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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2