フォント形式変換
Font Converter
TTF・OTFとWOFFをブラウザ内で相互に変換して@font-face規則まで書き出します(WOFF2はBrotliが要るため扱わず、デスクトップの道具を案内します)。
sfnt系の形式とWOFF 1.0を双方向に変換し、どちらの向きに進むかは置かれたファイルから判断します。どちらの向きも情報を失いません。WOFFは容器なので、包んで解けば同じテーブルが戻り、`head.checkSumAdjustment`は再計算されるので結果は検証を通ります。WOFF2は受け付けず、黙って失敗する代わりに理由を説明します。
TTF · OTF → WOFF、または WOFF → TTF · OTF
ファイルを一つ置けば、向きはこちらで決めます。すべてこのタブの中で行います。
できることと、できないこと
- · TTF · OTF ⇄ WOFF 1.0:WOFF 仕様(W3C, 2012)のとおり、テーブルごとに zlib 圧縮をかけ、44 バイトのヘッダーとディレクトリを書きます。圧縮はブラウザーの
CompressionStream('deflate')、展開のときは元のチェックサムのまま sfnt を組み直すのでhead.checkSumAdjustmentまで正しく出ます。どちらの向きも無損失です。 - · WOFF2 は作ることも展開することもできません。Brotli が必要ですが、ウェブプラットフォームは Brotli をページに公開していません。WOFF2 がどうしても必要ならデスクトップの道具を使ってください。ふつう WOFF よりさらに 20–30% 小さくなります。
- · TTF ⇄ OTF(CFF) のように輪郭の形式を変えるのは、変換ではなく描き直しなので扱いません。拡張子が .otf でも中身が TrueType のフォントは、ふつうに扱えます。
- · フォントのライセンス(OS/2 の fsType)は変換しても変わりません。サーバーに載せる前に配布条件を確認してください。
容量を減らすなら、形式の変換よりフォントのサブセット化のほうがはるかに効きます。ハングルのフォントは 2,350 字に絞ると 90% 以上小さくなります。
使い方
ファイルを1つ置きます
TTFかOTFならWOFFに包み、WOFFなら中身のアウトラインに応じてTTFかOTFに解きます。向きの切り替えがないのは、先頭4バイトの署名がすでにどちらの向きかを語っているからです。
前後のサイズを確かめます
WOFFにすると40〜50%ほど減るのがふつうで、これはテーブルごとのzlibであって、気の利いたことは何もしていません。ほとんど動かないなら、そのフォントはおそらくすでに圧縮されたデータです。たとえば、詰め込まれたチャーストリングを多く持つCFFのフォントです。
ファイルと@font-faceを取ります
宣言はファイルがスタイルシートの隣にある前提で書かれていて、ウェイトとイタリックの値はファイル名からの推測ではなく、フォントのOS/2とpostのテーブルから読んでいます。
よくある質問
WOFF2に対応しないのはなぜですか。
WOFF2はBrotliで圧縮されているうえに、グリフのテーブルを並べ替えて変換もしています。ウェブのプラットフォームがページに渡す`CompressionStream`にはdeflateとgzipしかなく、Brotliがないのでどちらの向きもブラウザでは不可能です。デスクトップならfonttools(`pyftsubset --flavor=woff2`)か`woff2_compress`が行い、WOFFよりさらに20〜30%ほど減ります。
TTFを本物のOTFに変えられますか。
変えられませんし、正直な道具ならどれも変えられません。TrueTypeは2次曲線、CFFは3次曲線を使い、そのあいだを行き来するのは許容誤差を伴う曲線の当てはめで、アウトラインが変わります。それは変換ではなくフォントを描き直すことです。扱えるのは、拡張子だけが紛らわしい、中身がTrueTypeのアウトラインである`.otf`というよくある場合です。
今もWOFFは要りますか。TTFのままで十分ですか。
サーバーがgzipやbrotliを付けて配るTTFはWOFFに近いところまで縮むので、形式の重みは昔ほどではありません。それでもWOFFは持っておく価値があります。サーバーが圧縮しないときでも縮みますし、意味のあるブラウザはどれも10年前から対応しています。ただし、はるかに大きい効き目があるのは容器ではなくサブセット化です。
変換するとライセンスの許す範囲は変わりますか。
変わりません。OS/2のfsTypeも、すべてのnameレコードもそのまま通るので、埋め込んではいけないフォントはWOFFになっても埋め込んではいけないフォントのままです。サーバーに置く前に配布条件を確かめてください。フォント情報ビューアーがそれらのレコードを表示します。
ここから渡せます
フォント情報ビューアー
Font Inspector
フォントファイルを開いて、ブロック別の収録グリフ・ハングル音節数・ウェイト・可変軸・埋め込み許可・ライセンス名レコードを表示します。
フォントのサブセット化
Font Subsetter
TrueTypeフォントを実際に使う字だけに削ぎ落としてWOFFにも包む、日本語ウェブフォントで数MBと数十KBを分ける作業です。
SVGエディタ・解説
SVG Editor and Explainer
SVGをプレビューの隣で編集しながら、viewBoxと拡大、変形、各パスコマンド、継承された塗り、無駄なバイト、そして<img>やデータURIやインラインで何が壊れるかを解説します。
デバイスモックアップ
Device Mockup
スクリーンショットをスマホ・タブレット・ノートPC・ブラウザの枠にはめ、背景と影を添えます。
次の一手
このツールが出したものをそのまま受け取れる道具です。
CSS整形・圧縮
CSS Beautifier & Minifier
並べ替えを一切せずにCSSを整形または圧縮し、トークンの並びをそのまま保ちます。
フォント情報ビューアー
Font Inspector
フォントファイルを開いて、ブロック別の収録グリフ・ハングル音節数・ウェイト・可変軸・埋め込み許可・ライセンス名レコードを表示します。
フォントのサブセット化
Font Subsetter
TrueTypeフォントを実際に使う字だけに削ぎ落としてWOFFにも包む、日本語ウェブフォントで数MBと数十KBを分ける作業です。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。