piapia123
ja

フォントビューア

画像

処理はすべてブラウザ内で完結します。データは送信されません

フォントファイルをドロップするだけで確認できます:見本は 12〜48px のサイズ順に並べて本文や小さい文字の見え方を判断するためのもの、字形一覧は碼位を表に広げてそのフォントが何を持っているかを見るためのものです。 字形一覧が最も役立つのはアイコンフォントです:私用領域(U+E000–F8FF)を広げると、字形があるマスは通常表示、ないマスは暗く表示され、クリックすると碼位の HTML 実体参照をコピーできます —— デザインファイルのアイコンには名前がなく `U+E600` しか書かれていないので、この表が照合に使えます。 収録範囲はフォントファイル内の cmap テーブル(碼位 → 字形の対応表)から読み取ります —— 「このフォントがどの字形を持つか」の答えはファイルに書かれており、`.ttf` / `.otf` なら正確に読み取れます。⚠️ `.woff` / `.woff2` は各テーブルが圧縮されて格納されており(zlib / Brotli)、ブラウザでは展開できないため、その2形式は描画プレビューのみで収録範囲は表示しません(理由も画面に書いています)。 ⚠️ 必ずお伝えすべきこと:フォントには著作権があり、ここで表示できても商用利用できるとは限りません。無料でも個人利用限定のものは多くあります。またブラウザはフォント内部のファミリー名を読めない(そのような API がない)ため、画面に出る名前はファイル名由来です。

機能

  • .ttf / .otf / .woff / .woff2 をドロップするだけでプレビュー。ファイルは送信しません
  • 見本は 12〜48px の7段階で表示。任意の文字列に差し替えられます
  • 既定の見本は多言語(画面の言語に応じて中国語・英語・日本語)
  • 字形一覧は5領域:私用領域(アイコンフォント)、ASCII、ラテン補助、約物、漢字
  • 対応状況を実測:字形があるものは通常表示、ないものは暗く、空白は破線枠
  • 1ページ 256 マスでページ送り可能。私用領域は全 25 ページ
  • マスをクリックで10進数の実体参照(``)をコピー。ホバーで16進数と CSS 表記
  • ページごとに集計:字形あり・なし・空白の件数

使い方

  1. 点線の枠にフォントファイルをドロップします(クリックして選択も可)
  2. 見本で各サイズの見え方を確認し、必要なら文字列を差し替えます
  3. 字形一覧で領域を選び、ページを送ってアイコンを探します
  4. マスをクリックすると碼位がコピーされ、そのまま HTML に貼れます

よくある質問

「字形なし」はどうやって判定していますか?
フォントファイル内の cmap テーブル(碼位 → 字形の対応表)を読んでいます。これがこの事柄の権威ある答えで、`.ttf` / `.otf` なら正確に読み取れます。 ⚠️ ここに至るまでの遠回りを記しておきます:このツールは最初、2通りの推測を試しました(システムフォントと比べる/どのフォントにも無い碼位の描画と比べる)が、どちらも Windows で失敗しました。前者はフォント自身の `.notdef` の形の違いに騙され(欠けている碼位がすべて「あり」と判定されました)、後者はシステムフォントが私用領域の字形を持っていることに騙されました(Segoe 系が実際のアイコンを描きますが、それはこのフォントのものではありません)。根っこにあるのは「ブラウザは字形がどのフォント由来かを教えてくれない」ことで、代替の連鎖も安定しません —— 推測はできず、読むしかありません。
.woff / .woff2 で収録範囲が出ないのはなぜですか?
これら2つの形式は各テーブルを個別に圧縮して格納しており(woff は zlib、woff2 は Brotli)、使う前に展開が必要です。ブラウザには `DecompressionStream` がありますが、対応しているのは gzip と deflate だけで、Brotli には対応していません。そのためこの2形式では字形一覧は描画プレビューのみで、「あり / なし」は表示せず、理由も画面に書いています —— 推測した結果は、出さないより悪いからです。正確な字形一覧が必要なら、同じフォントの `.ttf` / `.otf` 版をお使いください(ほとんどの場合入手できます)。
本当のフォント名ではなくファイル名が出るのはなぜですか?
ブラウザはフォント内部のファミリー名を読めないからです —— `FontFace` は渡した名前を受け取るだけで、逆引きの API がありません。`name` テーブルを読むにはバイナリを自分で解析する必要があり(woff2 は圧縮されているので展開も必要です)、それは別のツールの仕事です。このページが出せるのはファイル名と実際の描画結果です。本当の名前を確認するなら、インストールして OS のフォント一覧を見るのが最短です。
.ttc と .eot が読み込めないのはなぜですか?
どちらもブラウザが対応していません。`.ttc` はフォントコレクション(1つのファイルに複数のフォントが入ったもの。macOS でよく見られます)で、ブラウザにはそこから1つを選ぶ手段がありません —— 先に単一のフォントを取り出す必要があります。`.eot` は IE 時代の独自形式で、古い IE しか解釈できません。ツールはこの2つを事前に断り、理由を表示します。「ドロップしたのに何も起きない」画面で悩ませないためです。

関連ツール