[2026/9/29]

[WEB Tool] Font Inspector v1.0 — フォントの中身をブラウザで覗くツール使い方ガイド

[WEB Tool] Font Inspector v1.0 — フォントの中身をブラウザで覗くツール使い方ガイド

概要

Font Inspector は、フォントファイルの中身をブラウザだけで覗けるツールです。フォントを開くと、全グリフの一覧、アウトラインと制御点、文字を並べたときの結果（シェーピング）、テーブルの生バイトを確認できます。

TrueType フォントの中には、小さいサイズでも文字をきれいに見せるための「ヒンティング」と呼ばれるプログラムが入っています。Font Inspector では、このプログラムを逆アセンブルして、命令列として読むこともできます。

文字の描画と並べ方は、Chrome や Firefox でも使われているシェーピングエンジン HarfBuzz（WASM 版）が担当しています。インストール不要で、フォントファイルはサーバーに送信されません。

Font Inspector

スタートメニューから起動

トップページのスタートメニューからも起動できます。

font inspector — スタートメニューから起動

HarfBuzz // harfbuzzjs

スクリーンショット

Font Inspector — グリフ一覧と「@」の制御点

Font Inspector — グリフ一覧と「@」の制御点

Font Inspector — SHAPING — ffi 合字が 1 グリフになる

SHAPING — ffi 合字が 1 グリフになる

Font Inspector — TRUETYPE VM — fpgm の逆アセンブルと VM のスペック表

TRUETYPE VM — fpgm の逆アセンブルと VM のスペック表

Font Inspector — HEX — テーブルの生バイト

HEX — テーブルの生バイト

Font Inspector — 制御点のドラッグとライセンス警告

制御点のドラッグとライセンス警告

操作動画

操作動画

DejaVuフォント

動作テストでは「DejaVuフォント」を利用させてもらっています。

DejaVu fonts - Wikipedia

DejaVu fonts - Wikipedia

The DejaVu fonts are a superfamily of fonts designed for broad coverage of the Unicode Universal Character Set. The fonts are derived from Bitstream Vera, a font family released by Bitstream under a free license that allowed derivative works based upon them; the Vera family was limited mainly to the characters in the Basic Latin and Latin-1 Supplement portions of Unicode, roughly equivalent to ISO/IEC 8859-15, and Bitstream's licensing terms allowed the fonts to be expanded upon without explicit authorization.

en.wikipedia.org

ツールの特徴

  • ブラウザ完結: インストール不要。フォントファイルはブラウザの中だけで読み込み、サーバーには送信しません。
  • 主要なフォント形式に対応: TTF / OTF / TTC（複数フォントをまとめたファイル）/ WOFF を開けます。
  • 全グリフの一覧: 数万グリフある日本語フォントでも、240 個ずつページ送りで一覧できます。文字・Unicode 番号・グリフ番号・グリフ名で検索できます。
  • アウトラインと制御点: グリフを大きく表示し、ベジェ曲線の点（線が通る点と制御点）を色分けして重ねます。点を掴んで動かすこともできます（表示のみ）。
  • シェーピング: 文字列を入れると、合字・カーニング・縦書きなどが効いた結果と、各グリフの位置を表で確認できます。可変フォントは軸のスライダーで太さなどを変えられます。
  • TrueType ヒンティング VM: フォントに埋め込まれたヒンティング用のプログラム（fpgm / prep / 各グリフの命令）を逆アセンブルして表示します。
  • HEX ダンプ: フォントを構成するテーブルの生バイトを見られます。

対応形式

形式拡張子対応
TrueType.ttf○（ヒンティング命令も表示）
OpenType（CFF）.otf○（TrueType 命令はありません）
TrueType / OpenType Collection.ttc .otc○（フォント番号を選んで表示）
WOFF.woff○（ブラウザ内で展開して表示）
WOFF2.woff2× v1 では未対応

使い方

1. フォントを開く

画面右上の「フォントを開く」を押してファイルを選ぶか、画面のどこかにフォントファイルをドラッグ＆ドロップします。

TTC（複数のフォントを1つにまとめたファイル）を開くと、左パネルに「フォント番号（TTC）」の選択欄が出ます。表示するフォントを選んでください。

2. 画面の構成

場所内容
左パネルフォント情報（INFO）、可変フォントの軸（VARIATION AXES）、テーブル一覧（TABLES）
中央4 つのタブ（GLYPHS / SHAPING / TRUETYPE VM / HEX）
右パネル選択中のグリフの詳細（GLYPH）と、そのグリフの命令列（GLYPH PROGRAM）
下端ステータスバー（読み込み結果や検索件数）

3. 左パネル

INFO には、name テーブルや head / OS/2 テーブルから読み取った情報を表示します。

項目内容
ファミリー / スタイル / フルネーム / バージョンフォントの名前とバージョン
形式TTF / OTF / TTC / WOFF と、先頭のバージョン番号
アウトラインTrueType（2次ベジェ）か CFF（3次ベジェ）か
グリフ数 / Unicode 数フォントに入っているグリフの数と、割り当てられている文字の数
unitsPerEmグリフの座標系の大きさ（1000 や 2048 が一般的）
作成 / 更新フォントの作成日と更新日
ウェイト / ベンダー太さの値（400 = 標準、700 = 太字）と、制作元の4文字コード
埋め込みOS/2 テーブルの埋め込み許可の設定
著作権 / ライセンス長い場合は ▶ を押すと全文を表示します

VARIATION AXES は、可変フォントを開いたときだけ表示されます。スライダーを動かすと、太さ（wght）などの軸が変わり、グリフ一覧・詳細・シェーピングの全部に反映されます。

TABLES は、フォントを構成するテーブルの一覧です。行をクリックすると、HEX タブにそのテーブルの生バイトが表示されます。

4. GLYPHS タブ

フォントに入っている全グリフを一覧します。各マスの下の番号は、文字が割り当てられているグリフなら U+0041 のような Unicode 番号、割り当てのないグリフ（合字や縦書き用など）なら #123 のようなグリフ番号です。番号がオレンジ色のグリフには、ヒンティング命令が入っています。

操作動作
マスをクリック右パネルにグリフの詳細を表示
◀ / ▶240 個ずつページ送り
検索欄に入力して Enter下の表の方法で検索（空にして Enter で全件表示に戻る）
検索の入力例意味
あいう入力した文字のグリフ
U+3042 / 0x3042Unicode 番号
36グリフ番号
uniFB03グリフ名

5. 右パネル（グリフの詳細）

選択したグリフを大きく表示します。

表示意味
水色の横線ベースライン
水色の縦線送り幅の開始位置と終了位置
オレンジの点線が通る点（on-curve）
ピンクの白抜きの点線を引っぱる制御点（off-curve）。TrueType は1つ、CFF は2つずつ

点のドラッグ：点を掴んで動かすと、その場で形が変わります。これは表示だけの機能で、フォントファイルは一切変更されません。最初に点を触ったときは、フォントのライセンスに応じた注意が表示されます。「元に戻す」で元の形に戻ります。

その下には、グリフ番号、名前、Unicode、送り幅、バウンディングボックス、輪郭と点の数などを表示します。CID 方式の日本語フォント（源ノ角ゴシックなど）では、名前は cid00034 のような CID 番号になります。

GLYPH PROGRAM は、そのグリフのヒンティング命令の逆アセンブルです。命令にマウスを乗せると、命令の意味が表示されます。CALL → fn 7 のようなピンクのリンクを押すと、TRUETYPE VM タブの関数定義に飛びます。

6. SHAPING タブ

文字列を入力すると、HarfBuzz で並べた結果を表示します。

入力欄内容
テキスト並べる文字列
featuresOpenType の機能を指定。例：liga=0（合字を切る）、kern（カーニング）、ss01（スタイルセット1）、-liga（liga=0 と同じ）
方向自動 / LTR（左から右）/ RTL（右から左）/ TTB（縦書き）

下の表には、並んだグリフごとの情報が出ます。行をクリックすると、右パネルにそのグリフが表示されます。

列意味
gid / name使われたグリフの番号と名前
cluster元の文字列の何文字目から来たか。合字で数文字が1グリフになると、番号が飛びます
xAdv / yAdv次のグリフまでの送り幅（縦書きでは yAdv）
xOff / yOff位置の微調整（アクセント記号の位置合わせなど）

表の上には、そのフォントが持っている機能（GSUB / GPOS の feature タグ）の一覧が出ます。

7. TRUETYPE VM タブ

TrueType フォントのヒンティング用プログラムを表示します。CFF（OTF）フォントには実行できる命令がないため、説明だけが表示されます。

上段のカードは、maxp テーブルなどから読んだ「VM のスペック表」です。

カード意味
スタック深さ上限プログラムが使うスタックの最大の深さ
関数の数（上限）fpgm で定義される関数の数
ストレージ領域読み書きできる作業領域の大きさ
CVT（定数表）命令から参照する寸法の表の件数
トワイライト点輪郭の外に置ける作業用の点の数
命令定義 IDEF独自命令の定義数（通常 0）
fpgm / prepそれぞれのプログラムのバイト数
命令ありグリフ / グリフ命令 合計命令を持つグリフの数と、全グリフの命令の合計バイト数
最長のグリフ命令一番長い命令を持つグリフ。クリックで右パネルに表示

その下のボタンで、表示するプログラムを切り替えます。

ボタン内容
fpgm関数定義。フォントを読み込んだときに1回実行されます。上の fn 0 fn 1 … を押すと各関数へ飛びます
prep前処理。表示サイズが変わるたびに実行されます
cvt命令から参照する寸法の表（数値の一覧）

逆アセンブル結果の色分けは次のとおりです。

色命令
ピンク（太字）FDEF / ENDF（関数定義の始まりと終わり）
オレンジIF / ELSE / EIF / CALL / ジャンプなど、流れを変える命令
灰色PUSHB / PUSHW などの値を積む命令
水色積まれる値

8. HEX タブ

左パネルの TABLES で選んだテーブルの生バイトを、16 バイトずつ表示します。左からファイル先頭からのオフセット、16 進数、ASCII 表示です。大きいテーブルは先頭 4096 バイトまで表示します。

注意事項

  • フォントファイルはブラウザの中だけで読み込みます。サーバーへの送信や保存は一切しません。
  • WOFF2 形式には v1 では対応していません。
  • 点のドラッグは表示だけの機能です。変更したフォントを保存する機能はありません。
  • フォントの改変や再配布は、それぞれのフォントのライセンスに従ってください。市販フォントや OS 付属のフォントの多くは、改変を禁じています。
  • ヒンティング命令の逆アセンブルは、命令を実行せずに読み下したものです。CALL の呼び出し先は、直前に積まれた値から推定しているため、実行時に決まるものは「fn ?」と表示されます。
  • ツールにフォントは同梱していません。お手元のフォントを開いてお使いください。

よくある質問 (FAQ)

Q. TRUETYPE VM タブに何も表示されません
A. OTF（CFF）フォントには、TrueType のヒンティング命令がありません。また、Google Fonts の可変フォントのように、ヒンティングを省いた TTF もあります。命令が入っているのは、DejaVu のような昔からある TTF や、OS に付属する TTF です。

Q. グリフ名が gid33 や cid00033 になっています
A. グリフ名を持たないフォントです。CID 方式の日本語フォント（源ノ角ゴシックなど）は、グリフ名の代わりに CID 番号を表示します。

Q. 一覧に文字が割り当てられていないグリフ（#123 など）があります
A. 合字、縦書き用の字形、異体字など、シェーピングの結果として使われるグリフです。SHAPING タブで該当する文字列を並べると、使われる様子を確認できます。

Q. WOFF2 のフォントを開けません
A. v1 では WOFF2 に対応していません。元の TTF / OTF か、WOFF をお使いください。

Q. 大きな日本語フォントを開くと少し時間がかかります
A. 数十 MB の TTC でも、多くの環境で1秒以内に読み込めます。グリフ一覧は 240 個ずつ描画するので、ページ送りは軽く動作します。

技術記事

実装の詳細は、技術記事にまとめています。

更新履歴

バージョン日付内容
v1.0.02026/9/29初回公開

クレジット

本ツールは以下のソフトウェアを利用して構築されています。

  • HarfBuzz — Old MIT License（Behdad Esfahbod、Khaled Hosny ほか HarfBuzz 開発者）
  • harfbuzzjs — MIT License
  • sfnt パーサー / TrueType 命令の逆アセンブラ / UI — 自作
HarfBuzz Manual: HarfBuzz Manual

HarfBuzz Manual: HarfBuzz Manual

HarfBuzz HarfBuzz is a text shaping library. Using the HarfBuzz library allows programs to convert a sequence of Unicode input into properly formatted and positioned glyph output—for any writing system and language. HarfBuzz also includes font subsetting, glyph rasterization (bitmap, vector, and GPU), and integration with FreeType, Cairo, CoreText, DirectWrite, and other platforms. See github.com/harfbuzz/harfbuzz for an overview of all libraries and tools, download instructions, and development resources.

harfbuzz.github.io