フォントをPNGに変換

フォントの見本、商品ページ、デザインの依頼書、フォーラムへの投稿に使うため、あるいはダウンロードした書体をインストールする前に見え方を確かめるために、フォントの画像が欲しいことはありませんか。このツールは、TTF、OTF、WOFF、WOFF2ファイルをページに読み込み、入力した文字、文字のグリッド全体、サイズ別のウォーターフォールのいずれかを、好きな色と透明または単色の背景でPNGに描画します。フォントのファミリー、スタイル、バージョン、グリフ数も読み取り、フォントに含まれない文字も一覧にします。

使い方

1. フォントファイルを1つ以上選ぶか、端末にインストールされているフォント名を入力します。
2. 好きな文字、グリフシート、サイズ別ウォーターフォールから選び、文字を編集します。
3. フォントサイズ、色、背景、内側の余白、行の高さを設定します。
4. PNGをダウンロードします。フォントが複数ならPNGも複数になります。

計算式

グリフシート：セル = 1.5 × フォントサイズ、列 = 16、幅 = 2 × 内側の余白 + 16 × セル、高さ = 2 × 内側の余白 + 行数 × セル。テキスト：各行をフォントのアセントとディセントで測り、行の高さ × サイズの間隔で並べます。

フォントはブラウザーのFontFace APIで読み込み、このページでだけ使って、その後は取り除きます。ファミリー、スタイル、バージョンはフォントのnameテーブルから、グリフ数はmaxpから、文字一覧はcmap（形式4と12）から取得し、WOFFのテーブルは先に展開します。WOFF2はBrotliで圧縮されているため、ブラウザーはフォントを描画できてもテーブルは読み取れません。

計算例

48 pxのグリフシートのセルは48 × 1.5 = 72 pxです。印刷可能なASCII文字94個は16列6行を埋めるので、内側の余白20 pxならPNGの幅は2 × 20 + 16 × 72 = 1,192 px、高さは2 × 20 + 6 × 72 = 472 pxです。アクセント付きのラテン文字（188文字）を加えると12行になり、高さは904 pxです。