フォント表示テスト・Base64 CSS生成

TTF・OTF・WOFF・WOFF2を読み込み,任意文字列で表示を確認し,元のフォントデータをBase64で埋め込む@font-face CSSを生成します.nameテーブルの簡易表示はTTF・OTF向けで,別形式への変換や圧縮,サブセット化は行いません.

読み込み中...

このツールが向いている用途

操作欄に戻る ↑

フォントの表示確認やWeb用CSSの準備を行いたい場面で,最大10MBのフォントを一時登録して任意テキストで表示テストを行い,Base64化した@font-face CSSを取得できます.

まず試せること

埋め込み利用が許されているWOFF2を1つ選択し,入力欄にZeroTools 123と入力,文字サイズ32pxを指定し,コピーで@font-faceとdata:font/woff2;base64を確認します.

利用条件

別形式への変換や圧縮,サブセット化には対応しておらず,表示できる文字はフォントに依存します.生成CSSの公開前にフォントの埋め込み利用条件を確認してください.

ZeroToolsのブラウザ内処理とプライバシー

ZeroToolsは,入力内容を端末内で処理するツールを中心に提供しています.各ツールの対応範囲と制限を確認して利用してください.

データの取り扱い・プライバシー方針
第1章

対応形式と用途

本ツールは,ウェブサイトやアプリケーションの開発において,ローカル環境に存在するフォントファイルをブラウザ上で即座に確認し,ウェブ埋め込み用のコードを生成するための専用ユーティリティです.対応しているフォント形式は,現在ウェブ標準として広く普及している「TTF(TrueType Font)」,「OTF(OpenType Font)」,「WOFF(Web Open Font Format)」,そして「WOFF2」の4種類となります.

ここで最も重要な前提として,本ツールは「表示テスト」および「元のバイト列のBase64 CSS生成」のみに特化しており,ファイル形式の変換(例えばTTFからWOFF2への変換)や,Brotliアルゴリズム等を用いたデータ圧縮,あるいは不要な文字を削って容量を減らすサブセット化といった処理は一切行いません.

ユーザーがアップロードしたバイナリデータは,そのままの状態でメモリ空間に展開されます.したがって,本ツールの主な用途は,手元にあるフォントがウェブブラウザ上でどのようにレンダリングされるかを事前に検証することや,アイコンフォントのような軽量なフォントファイルをCSS内にインラインで埋め込むためのBase64文字列を素早く取得することに限定されます.

ウェブフォントの運用にあたっては,形式変換や圧縮といった高度な最適化を期待するのではなく,あくまで元のファイルをそのままウェブ上で扱うためのブリッジとして機能することを理解して利用する必要があります.

第2章

FontFace表示

フォントファイルの表示テストは,最新のウェブブラウザが提供する「FontFace API」を活用することで実現されています.ユーザーがドラッグ&ドロップでフォントファイルを指定すると,内部ではファイルの読み取り機構を用いてデータがメモリ上の「ArrayBuffer」として読み込まれます.

その後,ブラウザのAPIに対して独自に生成したフォントファミリー名と,読み込んだバイナリデータを渡し,現在のドキュメントに対して直接登録を行います.この機構の最大の利点は,選択したフォントをこのページ内のFontFaceへ直接渡して表示できる点にあります.これにより,機密性の高い商用フォントや開発中の未公開フォントであっても,サイト表示等の通信とは別に,選択ファイルをアップロードする処理を挟まずプレビューできます.

さらに,表示テスト領域であるコントローラー画面では,フォントサイズを12pxから80pxの範囲で変更できるほか,文字間隔をマイナス値から20pxまで,行高を1.0から2.5までスライダーで直感的に調整することができます.加えて,文字色と背景色もカラーピッカーから自由に指定できるため,実際のウェブデザインに近いコントラストやレイアウト条件を想定したシミュレーションを,現在のブラウザ環境で実行することができます.

第3章

nameテーブル情報

本ツールには,TTFおよびOTFのsfntテーブルディレクトリを前提として,nameテーブルを簡易解析する機能があります.WOFF・WOFF2は表示テストとBase64 CSS生成の対象ですが,圧縮・再構成された内部テーブルをこの簡易解析器で展開しないため,詳細情報は表示しません.

TTF・OTFではファイル先頭のテーブルディレクトリから「name」タグのオフセットを探し,各レコードのプラットフォームIDとエンコーディングを見ながら文字列を取り出します.候補にはフォントファミリー名,サブファミリー,著作権,一意の識別子,フルネーム,バージョン,PostScript名,商標,製造元,デザイナー,ライセンス説明があります.

ただし未対応の文字コードや規格外・破損ファイルでは空欄や不正確な表示になり得ます.表示されたライセンス文字列だけでWeb利用や再配布の可否を判断せず,配布元の許諾を確認してください.

第4章

Base64 CSS

フォントファイルをウェブサイトに組み込む手法の一つとして,CSS内のdata URLへフォントデータを埋め込む方法があります.本ツールは,読み込んだバイナリを65536バイト単位で文字列へ変換してBase64化し,拡張子に応じてtruetype・opentype・woff・woff2とMIMEタイプを指定した@font-faceを組み立てます.

nameテーブルからファミリー名とサブファミリーを取得できた場合は,引用符等をCSS文字列向けに整え,Bold・Italic・Obliqueの語からweightとstyleを簡易推定します.取得できない場合はファイル名を候補にします.この推定が実際の可変フォント軸や詳細なウェイト定義と一致するとは限らないため,出力後に名称・weight・styleを確認して調整してください.

Base64文字列は元のバイト列を表現したもので,形式変換・圧縮・サブセット化は行いません.

第5章

容量と互換性

本ツールを利用する上で,特にBase64化されたCSSコードを実際のプロジェクトに適用する際には,ファイル容量と互換性のトレードオフについて深く理解しておく必要があります.バイナリデータをBase64形式にエンコードすると,その仕組み上,元のファイルサイズから約33パーセントもデータ容量が増加します.

前述の通り,本ツールはサブセット化等の最適化を一切行わないため,例えば多数の漢字を収録した数メガバイトに及ぶ巨大なフォントファイルをBase64化した場合,生成される文字列は極めて膨大なものとなります.これをCSSに直接埋め込むと,大きなBase64文字列をCSSへ埋め込むと,CSSの転送量と解析量が増え,通常のフォントファイル配信で使える独立キャッシュも利用しにくくなります.

小さなファイルで通信要求をまとめたい場合などに候補となりますが,通常配信と実測で比較してください.また互換性の観点では,ブラウザのレンダリングエンジンやOSの描画機構によって,同じフォントであってもアンチエイリアスの適用具合や文字の太さが微妙に異なって見える場合があるため,本ツールでの表示はあくまで「現在操作しているブラウザ環境での描画結果」であることを念頭に置いてテストを行う必要があります.

第6章

確認手順と制約

見出し用の大きな文字だけでなく,本文サイズでも読みやすさを比べると,実際の採用判断に役立ちます.

最後に,対象となる10MB以下のフォントを読み込み,任意の文章,文字サイズ,文字間隔,行高,文字色,背景色を変えて現在のブラウザでの表示を確認します.英数字だけでなく,実際に使用する日本語,記号,数字を入力すると,収録されていない字形が代替フォントで表示される状態も見つけやすくなります.

TTF・OTFでnameテーブルを取得できた場合は参考情報を表示しますが,WOFF・WOFF2ではこの欄を表示しません.問題がなければBase64埋め込み用コードをコピーし,実際のCSSで名称・ウェイト・スタイル・容量・対応ブラウザを再確認します.破損ファイルやブラウザが未対応のフォントは読み込めず,代替フォントが見える場合があります.

本ツールはファイル修復,形式変換,圧縮,サブセット化,CLS改善を行いません.また,フォントにライセンス文字列があっても利用許諾を判定する機能ではないため,Web埋め込みや再配布の条件は必ず配布元の契約で確認してください.

よくある質問(FAQ)

A.
できません.選択したファイルを同じ形式のままプレビューし,元のバイト列をBase64化したCSSを生成します.形式変換,圧縮,サブセット化は行いません.
A.
TTF,OTF,WOFF,WOFF2を1件ずつ読み込み,10MBを超えるファイルは受け付けません.表示とCSS生成は4形式が対象ですが,nameテーブルの簡易表示はTTF・OTF向けです.
A.
できません.nameテーブルから取得できた文字列は参考情報です.Web埋め込み,再配布,商用利用の可否は配布元の利用許諾を確認してください.
A.
小さくなりません.Base64文字列は一般に元のバイナリより長くなり,本ツールは圧縮もしません.実運用では通常のファイル配信との容量・キャッシュ・読み込み条件を比較してください.