TTF
TrueType Font——Apple と Microsoft が開発した業界標準のバイナリフォント形式です。
TTF とは？
TrueType は Apple が 1980 年代後半に Adobe の PostScript Type 1 フォントの代替として開発し、後に Microsoft が Windows に採用しました。グリフのアウトラインを二次ベジェ曲線として保存します。PostScript が使用する三次曲線よりも計算が単純で、ラスタライズも高速です。
TTF はすぐに macOS と Windows の双方でユニバーサルフォント形式になりました。20 年以上にわたって、システムフォントからカスタム書体まで、フォントを配布するための標準的な方法でした。ウェブ配信では WOFF/WOFF2 に取って代わられていますが、TTF は現代のすべてのウェブフォント形式が構築される基盤であり続けています。
仕組み
TTF ファイルはテーブルで構成されたバイナリコンテナで、各テーブルに特定のデータが格納されています：
glyf——グリフのアウトライン（実際のベクター形状）cmap——文字とグリフのマッピング（どの Unicode コードポイントがどのグリフに対応するか）head——フォントメタデータ（units-per-em、作成日、フラグ）hmtx——水平メトリクス（各グリフの送り幅と左サイドベアリング）
アイコンフォントでは、各アイコンは私用領域（U+E000〜U+F8FF）の Unicode コードポイントに割り当てられます。この範囲は標準テキストと競合しないよう、アプリケーション定義文字のために特別に予約されています。
CSS で TTF アイコンフォントを使用する@font-face {
font-family: 'MyIcons';
src: url('myicons.ttf') format('truetype');
}
.icon {
font-family: 'MyIcons';
font-style: normal;
font-weight: normal;
}
.icon-home::before {
content: '\E001';
}format('truetype') ヒントは、ブラウザに期待するフォントファイルの種類を伝えます。TrueType がサポートされていない場合はダウンロードをスキップできますが（実際にはほぼすべてのブラウザがサポートしています）。
メリットとデメリット
- すべてのプラットフォームとの広い互換性
- デスクトップ、モバイル、ウェブすべてでサポート
- OS フォントインストールの標準形式
- ヒンティングサポートによる高いレンダリング品質
- 仕様が充実したドキュメント
- 圧縮なし——WOFF/WOFF2 より大きい
- ウェブ配信に最適化されていない
- モバイル回線ではダウンロードが遅くなる場合がある
ブラウザサポート
TTF は98%以上のブラウザサポートを誇り、すべての現代ブラウザと Internet Explorer 9 以降をカバーしています。また、Windows、macOS、Linux のすべての主要デスクトップ OS でネイティブにサポートされているため、TTF ファイルを変換なしでシステムフォントとして直接インストールできます。
TTF はどこでも動作しますが、ウェブ配信では WOFF2（本質的には圧縮した TTF）を優先してください。生の TTF はデスクトップ用途、開発環境、およびビルドパイプラインの基本形式に使用してください。
TTF を使う場面
- デスクトップアプリケーション——ネイティブアプリ、デザインツール、IDE で使用するシステムフォントとしてインストールする。
- Electron とネイティブアプリ——オフラインでのフォントレンダリングのために、TTF をアプリケーションに直接バンドルする。
- 開発とテスト——FontForge、fontTools、システムフォントビューアなどのツールで簡単に検査できる。
- システムフォントの検査——OS レベルのユーティリティを使ってグリフのメトリクス、ヒンティング、cmap テーブルを確認する必要がある場合。