charlie5188 / css-composite-font

# Composite Font Studio
复合字体工坊 · 複合字型工坊 · 合成フォント工房
Combine CJK and Western fonts with separate sizes, baselines and weights, then export the result for websites or design apps—like InDesign’s composite fonts.
**Try it in your browser** · English / 简体中文 / 繁體中文 / 日本語
日本語 · 简体中文 · 繁體中文
## Why
A `font-family` fallback chooses a font for each character, but does not balance their size or baseline. Composite Font Studio lets you tune that balance and keep it consistent across weights.
## Highlights
- **Compose by character class.** Choose fonts, sizes and baselines for Han, kana, Western text, digits and punctuation, with custom exception characters.
- **Match fonts across weights.** Auto-adjust size, baseline and available weights, then fine-tune individual steps or use a continuous variable-font range.
- **Bring your fonts.** Search Google Fonts and installed families, or import font files. Inspect font information and character-set coverage before applying a choice.
- **Proof as you work.** Edit proof text directly and check mixed-script text, missing glyphs and regional typography in a live preview.
- **Export where you need it.** Generate CSS or TTF / OTF / WOFF2 files for design and office apps. Swift / Kotlin / Flutter code export is experimental.
- **Save and share.** Keep presets in your browser or share an editable configuration link without an account.
## Important notes
- Font processing runs in your browser; font files are not uploaded. Installed-font access requires Chrome or Edge and permission; imported files must be supplied again after reloading.
- Share links contain configuration, not font files or custom proof text. Recipients need access to the same fonts, and font licenses still apply.
- Coverage counts characters, not regional glyph forms. Font files do not carry the app’s text-layout settings; see **About** in the app for coverage and export limitations.
## Development
No build step. Run `python3 tools/serve.py` and open .
Run `npm run setup` once, then `npm run verify` for the full checks. See AGENTS.md for development conventions and commands.
## 日本語
**合成フォント工房**は、InDesign の合成フォントのように、和文と欧文のフォント・サイズ・ベースライン・ウェイトを組み合わせ、Web やデザインアプリ向けに書き出すツールです。
### 主な機能
- **文字クラスごとに組み合わせる。** 漢字・かな・欧文・数字・約物のフォント、サイズ、ベースラインを指定でき、例外文字も追加できます。
- **ウェイトを通してバランスを整える。** サイズ・ベースライン・利用可能なウェイトを自動調整し、段階ごとの微調整や可変フォントの連続範囲にも対応します。
- **手持ちのフォントを使う。** Google Fonts とインストール済みフォントを検索し、ファイルも取り込めます。適用前にフォント情報や文字セットの収録率を確認できます。
- **編集しながら校正する。** 校正テキストを直接編集し、和欧混植、欠字、地域ごとの組版をリアルタイムで確認できます。
- **用途に合わせて書き出す。** CSS や、デザイン・オフィスアプリ向けの TTF / OTF / WOFF2 を生成します。Swift / Kotlin / Flutter コードの書き出しは試験的な機能です。
- **保存して共有する。** ブラウザにプリセットを保存し、アカウントなしで編集可能な設定リンクを共有できます。
### 利用時の注意
- フォント処理はブラウザ内で行い、ファイルをアップロードしません。インストール済みフォントの読み取りには Chrome または Edge と許可が必要です。取り込んだファイルは再読み込み後に再指定してください。
- 共有リンクに含まれるのは設定だけで、フォントファイルや独自の校正テキストは含みません。受信側でも同じフォントを用意し、各フォントのライセンスに従う必要があります。
- 収録率は文字の有無を数えるもので、地域の字体規格を保証しません。フォントファイルに組版設定は含まれません。詳しい収録率・書き出しの制限は、アプリ内の「仕組みと制限」を参照してください。
## 简体中文
**复合字体工坊**像