Google Web FontsをSVGに埋め込むにはどうすればよいですか？

HTML5、CSS3、SVGなどの新しいWebテクノロジーの利点について、私のサイトで記事を書いています。後者の利点の1つは、そうでなければ効果的な画像のテキストを選択できることです。

私はSVGが初めてで、Illustratorで最初のまともなグラフィックを作成しました。タグにUbuntuフォント用のGWFスクリプトを含むページに埋め込みました。結局のところ、Ubuntuフォントは通常のテキストで正しく表示されますが、このトリックをSVGで機能させるには、GoogleスクリプトをSVG自体に埋め込む必要があります。これどうやってするの？

base64エンコーディングを使用して、CSSにフォントを埋め込みます。<style />要素を使用して、CSSに似たSVGドキュメントのスタイルを適用できます。したがって、WOFFフォントがある場合は、次のように埋め込みます。

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

...base64でエンコードされたフォントデータはどこにありますか。

Typekitのスタイルシートを見ると、この例を見つけることができます。mimeタイプfont/woffが正しいかどうかはわかりませんapplication/font-woff。しかしfont/woff、font/truetype、font/opentype、など、より人気があるようです。

または、実際にWebフォントのSVGバージョンを使用して、ドキュメント内にSVGフォントの説明マークアップを埋め込むことができます（ただし、コメントでLukeが指摘しているように、ブラウザのサポートはまだ非常に制限されています）。

ただし、SVG仕様に従って外部フォントにリンクすることもできます。そのフォントを参照する複数のSVGドキュメントを作成する場合、これが最適なソリューションのようです。

の<defs>ようなセクション

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

動作します。

Nanoを使用して、Google Web FontsをSVGに直接埋め込むことができます。SVGを自動的にスキャンし、必要なフォントのみを選択的に埋め込み、Ubuntuフォントがすべての最新のブラウザーで同じように見えるようにします。私の場合、SVGにRobotoを組み込む必要がありました。

免責事項：私はNanoの背後にいるチームと一緒にいます。私たちも以前同じ問題に直面していたため、Nanoを構築することで自分の悩みを解決することにしました。これがお役に立てば幸いです！

編集：舞台裏で何が起こるかについて簡単に説明します：

SVGにフォントを埋め込むには、まずどのフォントファミリが使用されているかを知る必要があります。次に、これらのフォントファイルを見つけてダウンロードする必要があります。ダウンロードしたら、通常の太字、斜体、太字の斜体をBase 64エンコードに変換する必要があります。手動で行う場合、どのファイルが太字を使用し、どのファイルが太字を使用しないかを知ることは、多数のファイルに対して膨大な作業です。次に、4つのbase 64エンコード文字列すべてをSVGにコピーする必要があります。

そのため、Nanoをビルドし、SVGが自動的にスキャンされ、使用されているフォントのみが挿入されるようにします。たとえば、ボールドが使用されていない場合、またはテキストが存在しない場合、フォントは埋め込まれません。あなたがする必要があるのは、SVGをNanoにドラッグアンドドロップするだけです。詳細についてはこちらをご覧ください：https : //vecta.io/blog/making-svg-easier-to-use

これは簡単すぎるかもしれませんが、Googleからフォントをzipファイルとしてダウンロードし、Illustratorで必要に応じてSVGファイル出力に変換することを検討しましたか？

私はまだこれを試していないので、これは理論的なものですが、理論的にはうまくいくようです。

<desc>タグの後に次を追加します

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

私の答えを更新してください。このページでは、Nanoを使用するという別の回答が好まれています：https : //graphicdesign.stackexchange.com/a/121950/45239

システムにWebフォントをダウンロードしてインストールし、SVGを作成したと仮定します（以下で説明するのと同じ手順を多く使用しますが、「フォント：アウトラインに変換」を選択しない場合）、SVGをNanoにアップロードできます[埋め込みフォント：はい]オプションを確認して、[ダウンロード]をクリックします。

私の以前の答え：

選択可能なテキストとSEOを用意して犠牲にする場合：

1. Webフォントをダウンロードします。
2. ローカルにインストールします。
3. Adobe Illustratorを開きます
4. テキストを入力します。
5. ファイル>エクスポート>名前を付けてエクスポート…
6. 「.SVG」を選択します

7. これらの設定を選択します。

   • スタイリング：インラインスタイル
   • フォント：アウトラインに変換
   • 画像：保存
   • オブジェクトID：レイヤー名
   • 10進数：2
   • （有効）縮小
   • （有効）レスポンシブ

8. オプションで、結果のsvgをhttps://vecta.io/nanoにアップロードします（ファイルサイズを8.2％削減できました）