テキストをSVGに変換
<text>要素を使うSVGは、開かれる先にそのフォントがあるかどうかに左右されます。テキストをパスデータへ変換すれば、その依存は消えます。形がファイルと一緒に運ばれるので、どのブラウザでもエディタでもカッターでも表示は同一 — Webフォントのリクエストもゼロです。
テキストをSVGに変換返ってくるもの
グリフごとに1本のパス。設定した塗りルール・塗り・線が付き、グリフごとに固有のidを振るオプションもあるので、CSSやJavaScriptから文字を個別に指し示せます。単語全体を1本のパスにしたいときは、代わりに輪郭を溶接してください — カッターやアイコンシステムがたいてい好むのはこちらの形です。
グリフを引くだけでない、正しい整形
テキストはブラウザ自身が使うエンジンHarfBuzzで整形されます。したがってカーニングペアや合字が効き、複雑な文字体系もきちんと振る舞います。アラビア文字はつながり、インド系のクラスタは並べ替わります。可変フォントの軸やOpenType機能も開かれているので、アウトライン化の前にウェイトやスタイルセットを詰めておけます。
自分のフォントを使う
カタログは1,900以上のオープンソース書体族をカバーしていますが、代わりにご自身のTTFやOTFを放り込むこともできます。アップロードしたフォントはタブ内で読み込まれ、どこにも送信されません。つまり、ライセンス購入した市販書体もあなたのマシンから出ません。
よくある質問
- テキストは<text>のままではいけないのですか?
- 同じ表示が二度と保証されないからです。フォントが無ければ黙って置換されますし、Webフォントはリクエストと未整形テキストのちらつきを増やします。パスは固定のジオメトリです — ファイルがロゴやアイコン、あるいは機械に渡すものなら、いつでも報われます。
- テキストは検索可能・アクセシブルなまま?
- アウトライン化の後はそうではありません。文言はマークアップのaria-labelやtitle要素に保持し、後の変更に備えて編集可能な原稿を残してください。
- ライセンスを持っている自分のフォントは使えますか?
- 使えます — TTFかOTFをアップロードしてください。ブラウザ内で解析されるので、ファイルがマシンを離れることはありません。目的の用途でアウトライン化が許諾されているかはご確認ください。