回答:
すべての場合にテキストの外観が同じであることを確認したい場合-
最初に、svgとして保存する前にテキストを展開できます
次に、保存ダイアログのフォント部分で「アウトラインに変換」を押すことができます
フォントが実際のフォントタイプに正しくレンダリングされない理由は、Illustratorアプリケーションを使用してSVGが保存されるためです。アプリケーションは、デザインをコードに自動的に変換します。また、コード内のフォント名が厳密に観察された場合、システム内にインストールされている実際のフォントと一致しません。
フォントのレンダリングの問題を解決するには、IllustratorからSVGコードをコピーし、システムにインストールされているフォントの名前と一致するようにフォント名を変更する必要があります。(例:SVGコード内のフォント名はIllustratorから「Arial-Regular」ですが、システムにインストールされているフォントの名前は「Arial Regular」です。ここでは、Font-Familyを「Arial Regular」に変更する必要があります"。)
これにより、フォントをアウトラインに変換せずに問題を解決できます。
お役に立てれば!
既に述べたように、書体は、svgを開こうとするシステムで使用できる(または使用できない)フォントファイルへの参照です。解決策は、タイプをパスに変換して、曲線がファイル内に明示的に保存されるようにすることです。
ブラウザーが参照しようとしているフォントフェイスを認識しない理由については、svgファイルの作成時に使用したコンピューターと同じコンピューターでテストしていると推測されるため、これは不明です。フォントがIllustrator内で選択可能であるが、OSレベルで正式にインストールされていない可能性があります。
ウェブ用アーカイブ:
エクスポート: フォント:(テキスト:svg、サブコンジャント:なし)。プロパティsvg:(スタイル要素)。
結果のファイルのスタイル内で、編集します。
結果:
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
body {}
.st0{fill:#868686;}
.st1{font-family:'Roboto Condensed';}
.st2{font-size:14.414px;}
.st3{letter-spacing:55px;}
.st4{fill:#1D1D1B;}
.st5{font-family:'Roboto Condensed'; font-weight: 700;}
.st6{letter-spacing:51px;}
.st7{letter-spacing:45px;}
.st8{letter-spacing:40px;}
お使いのPCには、ローカルで使用可能なフォントファミリ(Skia-Regular)フォントファイルがない可能性があります。したがって、ブラウザでSVGファイルを開くと、ほとんどの場合Times New Romanであるデフォルトのシステムフォントを使用してレンダリングされます。いくつかの回避策があります。
SVGでのカスタムフォントの使用の詳細については、https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/をご覧ください。