私はUbuntu Monoフォントのテキストを持つSVG画像(InkScapeで作成)を持っています。私は使用していますが、フォントをインストールしていないコンピュータは、他のフォントでテキストを表示しています。 SVGファイルにフォントをアップロードするにはどうしたらいいですか?HTMLカスタムフォントを含むSVG画像を使用する
1
A
答えて
0
フォントをbase64に変換し、スタイルタグを使用してsvgファイルに追加できます。
<defs>
<style type="text/css">
@font-face {
font-family: 'FONT_NAME';
src: url(MIME+BASE64_STRING) format('TYPE_OF_FONT');
}
</style>
</defs>
1
数日前にこの問題が発生しました。ここでは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内のテキストはブラウザによってテキストとして認識されません。
関連する問題
- 1. SVGに外部CSSを含む画像を変換する
- 2. Pythonを使用して画像を含むhtmlからテーブルを抽出する
- 3. iTextを使用して画像を含むHTMLをPDFに変換する
- 4. Javascript parse html、画像を含むアンカータグを変更する
- 5. bokehで画像を含むhtmlファイルを保存する
- 6. PHPとHTML:画像を含むディレクトリをループする方法は?
- 7. JQueryを使用して画像を含むHTMLテーブルをスプレッドシートにエクスポート
- 8. SVGタグをHTMLページからSVG画像に保存する
- 9. HTML/CSSのカスタムフォントを使用
- 10. SVG画像にズームボックスを埋め込む
- 11. ジキルテーマの画像を含む
- 12. PHPExcelを使用して画像を含むExcelファイルをロード
- 13. GAEで画像を含むHTMLメールを送信
- 14. 画像ギャラリーブートストラップを使用して、側面にサムネイルを含むカルーセル
- 15. jpegを使用して1行を含む画像
- 16. 完了ブロックを含む画像アニメーション?スウィフトを使用して
- 17. 画像にSVGマスクを適用する
- 18. Xamarin.iOSを使用してHTMLメールに画像を埋め込む
- 19. 画像を含むhtml電子メールのプログラミング
- 20. 背景画像とテキストを含むカスタムhtmlボタンの作成
- 21. pyinstallerを使って画像を含むバンドルを作成する
- 22. HTML SVGマップ画像パスに従う
- 23. iOSアプリケーション用のSVGベースの画像アセットを読み込む
- 24. HTMLメールに画像を含めるベストプラクティス?
- 25. ダウンロードする画像にHTMLコードや画像データを含むデータを変換する方法
- 26. Google Chartを画像としてエクスポートするときにカスタムフォントを使用する
- 27. C#で画像を含むWkHTMLToSharp/wkhtmltopdfを使用してHTMLファイルをPDFに変換する方法
- 28. SVG画像を含むSphinxドキュメントはIE11でレンダリングされません
- 29. 上にuitextfieldを含むUIkeyboardポップアップ(画像を含む)
- 30. CIDを含む背景画像を含む