HTMLカスタムフォントを含むSVG画像を使用する

Question

私はUbuntu Monoフォントのテキストを持つSVG画像（InkScapeで作成）を持っています。私は使用していますが、フォントをインストールしていないコンピュータは、他のフォントでテキストを表示しています。 SVGファイルにフォントをアップロードするにはどうしたらいいですか？

Answer 1

フォントをbase64に変換し、スタイルタグを使用してsvgファイルに追加できます。

<defs> 
    <style type="text/css"> 
    @font-face { 
     font-family: 'FONT_NAME'; 
     src: url(MIME+BASE64_STRING) format('TYPE_OF_FONT'); 
    } 
    </style> 
</defs> 

Answer 2

数日前にこの問題が発生しました。ここではUbuntuのモノラルTTFへのリンクは次のとおりです。

http://ff.static.1001fonts.net/u/b/ubuntu.mono.ttf

サーバーにそれをアップロードして、あなたのCSSでフォントを宣言：

@font-face { 
    font-family: Ubuntu-Mono; 
    src: url(/path/to/ubuntu.mono.ttf); 
} 

次に該当するSVGのCSSには、宣言しますようにフォント：

.svg { 
    font-family: Ubuntu-Mono; 
} 

代替も、これはになりますけれども、あなたがSVGを作成したプログラムで、あなたのテキストの「アウトラインを作成」することができ

より大きいSVGファイルであり、SVG内のテキストはブラウザによってテキストとして認識されません。