イラストレーターSVGファイルのフォントタイプの保持


24

こんにちは。イラストレーターは初めてで、「Skia-Regular」フォントを使用する画像を作成しました。しかし、その画像を.svg形式で保存すると、フォントタイプが変更されます。また、ブラウザで.svg形式のファイルを開くと、フォントがまったく異なります。誰が私が間違っているのか教えてください。notepad ++でも.svgファイルを開いたところ、font-family = "'Skia-Regular'と表示されていますが、フォントはまだSkia Regularではありません。

参考のために画像も添付されています 画像添付

回答:


31

すべての場合にテキストの外観が同じであることを確認したい場合-

最初に、svgとして保存する前にテキストを展開できます

次に、保存ダイアログのフォント部分で「アウトラインに変換」を押すことができます


2
2番目の部分は明確です。最初の部分を説明してもらえますか、テキストをどのように「展開」しますか
Rizwan606 14

5
Rizwan606 @あなたが選択ツールを押しメニューオブジェクトを使用してテキストを選択し、その代わりに、テキスト、その後、右クリックを選択し、(それは図形にテキストを変換します)を展開し、アウトライン作成shooseが押し
宜蘭

5
この答えを明確にするために、両方を行う必要はありません。どちらの方法も独立して機能します。
サイモンウッドサイド

⚙️(エクスポートされたファイルの種類の詳細設定)→SVG→フォントに「アウトラインに変換。」
КонстантинВан

9

フォントが実際のフォントタイプに正しくレンダリングされない理由は、Illustratorアプリケーションを使用してSVGが保存されるためです。アプリケーションは、デザインをコードに自動的に変換します。また、コード内のフォント名が厳密に観察された場合、システム内にインストールされている実際のフォントと一致しません。

フォントのレンダリングの問題を解決するには、IllustratorからSVGコードをコピーし、システムにインストールされているフォントの名前と一致するようにフォント名を変更する必要があります。(例:SVGコード内のフォント名はIllustratorから「Arial-Regular」ですが、システムにインストールされているフォントの名前は「Arial Regular」です。ここでは、Font-Familyを「Arial Regular」に変更する必要があります"。)

これにより、フォントをアウトラインに変換せずに問題を解決できます。

お役に立てれば!


1
これはまさにそれです!ファイル>保存を選択してSVGを選択すると、IllustratorはフォントにPostScript名を使用します。予想通り「Myriad Pro」ではなく「MyriadPro-Regular」になり、IllustratorのようにブラウザがPostScript名で動作しません。回避策は、ファイル>エクスポートを使用してSVGを保存することです。PostScript名ではなく適切なファミリ名がエクスポートされるためです。
マイケルトンプソン

@Michael ThompsonがFile> Exportを選択すると、SVGはオプションの1つではありません。CS5を使用しています。これは以前/後のバージョンのオプションですか?
マックスシュタルケ

@MaxStarkenburg:エクスポートメニューはバージョン間で大きく変わります。新しいバージョンでは、SVGに保存/エクスポートする3つの方法があります。ファイル>名前を付けて保存>(SVGタイプを選択); [ファイル]> [エクスポート]> [名前を付けてエクスポート...](SVGタイプを選択)および[ファイル]> [画面用にエクスポート]>(SVG形式を追加)。
マイケルトンプソン

4

既に述べたように、書体は、svgを開こうとするシステムで使用できる(または使用できない)フォントファイルへの参照です。解決策は、タイプをパスに変換して、曲線がファイル内に明示的に保存されるようにすることです。

ブラウザーが参照しようとしているフォントフェイスを認識しない理由については、svgファイルの作成時に使用したコンピューターと同じコンピューターでテストしていると推測されるため、これは不明です。フォントがIllustrator内で選択可能であるが、OSレベルで正式にインストールされていない可能性があります。


はい、svgファイルを作成しているのと同じコンピューターでテストしています。そして、私が間違っているなら、私を修正してください。Font-FamilyプロパティでSkia Regularのフォント.ttfファイルに特定のパスを指定する必要があるため、返信の最初の部分を受け取りましたか?
Rizwan606 14

書体名とインストールされているフォントを一致させるのはブラウザ次第であるため、「いいえ」でttfへのパスを指定することはありません。この参照はcss font-face構文に似ており、フォントファミリスタイルのコンマ区切りリストを許可します。ブラウザはフォント名を異なる方法で識別する場合があります。
horatio 14

このような性質のロゴや配布物(pdfなど)で書体が重要な場合は、フォントを埋め込むか、パスに変換することをお勧めします。あなたは適切な書体がすでにインストールされているサードパーティーに依存しているので、したがって、この参照を解決するのは得策ではないかもしれない
ホレイショ

2

ウェブ用アーカイブ:

  1. Googleフォントを使用します。
  2. 最大2つのフォントファミリのみを使用します。

エクスポート: フォント:(テキスト:svg、サブコンジャント:なし)。プロパティsvg:(スタイル要素)。

結果のファイルのスタイル内で、編集します。

  1. 行「@import」を添付します。
  2. すべてのフォントサイズに「px」を添付します。
  3. フォント名を変更します。

結果:

<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;}


1
この答えは簡潔すぎます。それがSVGファイルなのか他のソリューションなのか
さえわかりません...-jiggunjer

1

お使いのPCには、ローカルで使用可能なフォントファミリ(Skia-Regular)フォントファイルがない可能性があります。したがって、ブラウザでSVGファイルを開くと、ほとんどの場合Times New Romanであるデフォルトのシステムフォントを使用してレンダリングされます。いくつかの回避策があります。

  1. @importを使用してGoogle Fonts APIを参照します(ただし、キャッチは、SVG画像をWebサイトにどのように埋め込むかに応じて、インラインSVGとオブジェクトタグSVGを使用している場合にのみ機能します)
  2. フォントをパスに変換します(ファイルサイズが大きくなり、ClearTypeレンダリングを失うとテキストがぼやけます)
  3. Nanoを使用してフォントをSVGファイルに埋め込む

SVGでのカスタムフォントの使用の詳細については、https//css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/をご覧ください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.