ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
概要
OTF(OpenType Font)は、Microsoft と Adobe が 1996 年に共同策定したフォント形式です。当時、Apple の TrueType(TTF)と Adobe の PostScript Type 1 という二大規格が併存しており、OS ごとに対応が分かれて混乱していました。これを終わらせるために両社が手を組み、TrueType の SFNT コンテナをそのまま流用しつつ、Adobe の PostScript 遺産である CFF(Compact Font Format)アウトライン も内部に格納できるように拡張したのが OpenType です。2007 年には ISO/IEC 14496-22(Open Font Format)として国際標準化されました。
OpenType フォントは内部のアウトライン形式によって 2 種類に分かれます。CFF 系は三次ベジェ曲線で字形を表現し(Adobe フォントの伝統)、拡張子は通常 .otf。TrueType 系は二次ベジェのまま OpenType の拡張機能を載せたもので、拡張子は .ttf のまま使われ「TrueType-flavored OpenType」と呼ばれます。Windows / macOS / Linux ともに両方を透過的に扱えるため、利用者はあまり区別を意識する必要がありません。
OpenType の真価は OpenType Layout と呼ばれる高度な組版機能にあります。GSUB(Glyph Substitution)テーブルでグリフを別のグリフに置換(合字・装飾文字・縦組み専用字形)、GPOS(Glyph Positioning)テーブルでグリフ位置を微調整(カーニング・マークアタッチ)、GDEF でグリフ分類を定義します。これらは feature tag と呼ばれる 4 文字コードで管理され、liga(標準合字)kern(カーニング)smcp(小型大文字)onum(オールドスタイル数字)swsh(スワッシュ)など 100 を超える機能が標準登録されています。
2016 年の OpenType 1.8 では Variable Fonts(可変フォント)が導入されました。これはひとつのフォントファイルに複数のウェイト・幅・斜体を 連続的な軸 として格納する画期的な仕組みで、wght(重さ 100〜900)wdth(幅)ital(イタリック)opsz(光学サイズ)といった軸を CSS の font-variation-settings から自由に補間できます。Web 配信のサイズ削減と、デザイン自由度の向上を同時に実現する技術です。
内部構造(OpenType 固有テーブル)
| テーブル名 | 役割 |
|---|---|
CFF / CFF2 | PostScript アウトライン(三次ベジェ)。CFF 系 OTF で glyf の代わり |
GSUB | グリフ置換(合字・装飾・スクリプト固有) |
GPOS | グリフ配置(カーニング・マークアタッチ) |
GDEF | グリフ分類定義(基底字・マーク・合字) |
BASE | ベースライン情報 |
JSTF | ジャスティフィケーション |
fvar / gvar / HVAR | Variable Fonts 用:軸定義・グリフ変形・メトリック変形 |
COLR / CPAL | カラーフォント(パレット + レイヤー) |
SVG | SVG ベースカラーフォント |
主な用途
- DTP・出版:Adobe InDesign / Illustrator / Photoshop は OpenType 機能(合字・スワッシュ・小型大文字)をフル活用できる。商業印刷の事実上の標準。
- Web フォント:Google Fonts / Adobe Fonts の配信はすべて OpenType(多くは WOFF2 でラップ)。
font-feature-settingsやfont-variation-settingsで OT 機能を CSS から制御。 - 多言語組版:アラビア語・ヒンディー語・タイ語など、文脈で字形が変わるスクリプトは OpenType Layout が不可欠。
- カラー絵文字フォント:Microsoft の Segoe UI Emoji(COLR/CPAL)、Apple の Apple Color Emoji(sbix)、Google の Noto Color Emoji(CBDT/CBLC)など、いずれも OpenType 拡張。
- 可変フォント:Roboto Flex、Inter、Source Sans Variable など、Web 配信サイズと表現力を両立。
feature tag の代表例(CSS から制御)
/* 標準合字 (fi, fl) を有効化 */
.text {
font-feature-settings: "liga" on, "kern" on;
}
/* オールドスタイル数字 + 小型大文字 */
.elegant {
font-feature-settings: "onum" 1, "smcp" 1;
}
/* 可変フォント (Variable Font) */
.heading {
font-family: "Roboto Flex", sans-serif;
font-variation-settings: "wght" 650, "wdth" 110, "opsz" 24;
}
| tag | 機能 | 例 |
|---|---|---|
liga | 標準合字 | fi → fi、fl → fl |
dlig | 任意合字(装飾用) | ct → ct(書道風) |
kern | カーニング(字間調整) | AV → 詰める |
smcp | 小型大文字 | hello → HELLO(小さい大文字) |
onum | オールドスタイル数字 | 1234567890(高さがバラバラ) |
tnum | 等幅数字 | 表組み用 |
swsh | スワッシュ(装飾末尾) | Q の長い尾 |
locl | ロケール固有字形 | セルビア語の и |
関連形式との比較
| 項目 | OTF(CFF) | TTF | Type 1(廃止) |
|---|---|---|---|
| アウトライン | 三次ベジェ(CFF) | 二次ベジェ | 三次ベジェ |
| 合字・カーニング | GSUB/GPOS(高度) | OpenType 拡張で同等 | 限定的 |
| 可変フォント | ○(CFF2) | ○ | × |
| OS 対応 | 全 OS | 全 OS | Adobe が 2023 終了 |
| 主な配布元 | Adobe Fonts, Google Fonts | Noto, IPA 等 | 歴史的 |
編集ツール
- Glyphs 3(macOS):プロのフォントデザイナーの主流。OpenType 機能を GUI で組める。
- FontLab 8(Win/Mac):商用フォント制作の老舗、Variable Font に強い。
- FontForge(OSS):無料で OTF 編集できる定番。
- fonttools(Python):
otf2ttf/ttf2otf/pyftsubset/fontmakeなど CLI 群。CI / 自動化と相性が良い。 - Adobe Font Development Kit (AFDKO):
makeotfを含む Adobe 公式ツールチェイン。
注意点・落とし穴
- CFF と TrueType のヒンティング差:CFF OTF はヒンティングが弱いとされてきたが、近年の DirectWrite / CoreText では差は小さい。古い Windows GDI ではぼやけることがある。
- feature tag は実装依存:フォントに
swshが定義されていなければ CSS で指定しても何も起きない。fonttools ttxでテーブルを確認する。 - Variable Font の対応:IE / 古い Edge / 古い Safari は非対応。フォールバックを用意する。
- サブセット化:日本語可変フォントをそのまま Web で読ませると数 MB になる。
pyftsubsetでグリフを絞り、unicode-rangeで分割配信する。 - ライセンスの粒度:「Web フォントとしての利用」「アプリへの埋め込み」「PDF 埋め込み」「サブセット化」が個別に許諾される EULA が多い。商用は必ず確認する。
関連リンク
- フォント(親カテゴリ)
- ファイル拡張子とは(概論)
- TTF(.ttf)
- WOFF(.woff)
- WOFF2(.woff2)
- PFB / PFM / Type 1(.pfb / .pfm)
- CSS(.css)
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?