Beibehalten des Schrifttyps in der Illustrator-SVG-Datei

24

Hallo, ich bin ein Illustrator und habe ein Bild mit der Schriftart "Skia-Regular" erstellt. Aber wenn ich das Bild im .svg- Format speichere, ändert sich der Schrifttyp. Und wenn ich die Datei im .svg-Format im Browser öffne, ist die Schriftart völlig anders. Kann mir bitte jemand sagen, was ich falsch mache. Ich habe die .svg-Datei auch in Notepad ++ geöffnet und dort steht font-family = "'Skia-Regular'". Trotzdem ist die Schriftart nicht Skia Regular. Hilfe wird gebeten. Danke

Bild ist auch als Referenz beigefügt Bild angehängt

adobe-illustrator vector logo svg Rizwan606
quelle

Antworten:

31

Wenn Sie sicherstellen möchten, dass der Text in jedem Fall das gleiche Aussehen hat -

Zunächst können Sie den Text vor dem Speichern als SVG erweitern

Zweitens können Sie im Schriftartbereich des Speicherdialogs auf "In Gliederung konvertieren" klicken.

Ilan
quelle
2
Der zweite Teil ist klar. Kannst du bitte den ersten Teil erklären, wie "erweitere" ich den Text?
Rizwan606
5
@ Rizwan606 Sie wählen den Text mit einem Auswahlwerkzeug aus und drücken auf Menüobjekt. Dort drücken Sie auf Erweitern (der Text wird in Formen umgewandelt). Alternativ wählen Sie den Text aus und klicken dann mit der rechten Maustaste und wählen Konturen erstellen
Ilan
5
Um diese Antwort zu verdeutlichen, müssen Sie nicht beides tun. Beide Methoden funktionieren unabhängig voneinander.
Simon Woodside
⚙️ (Erweiterte Einstellungen für exportierte Dateitypen) → SVG → Schriftart in „In
Konturen
9

Der Grund dafür, dass die Schriftart nicht korrekt mit dem tatsächlichen Schriftartentyp gerendert wird, liegt darin, dass die SVG-Datei mit der Illustrator-Anwendung gespeichert wird. Die Anwendung konvertiert das Design automatisch in Code. Bei genauer Betrachtung stimmt der Schriftname im Code nicht mit der tatsächlich im System installierten Schrift überein.

Um das Problem der Schriftwiedergabe zu umgehen, müssen Sie den SVG-Code aus Illustrator kopieren und den Schriftnamen so ändern, dass er dem Namen der in Ihrem System installierten Schrift entspricht. (Beispiel: Schriftname im SVG-Code, der von Illustrator "Arial-Regular" stammt, aber der Name der in Ihrem System installierten Schrift ist "Arial Regular". Hier müssen Sie den Code ändern, damit die Schriftfamilie "Arial Regular" lautet ".)

Dies soll Ihr Problem lösen, ohne dass Sie Schriften in Konturen konvertieren müssen.

Hoffe das hilft!

Sameer
quelle
1
Genau das ist es! Illustrator verwendet die PostScript-Namen für Schriftarten, wenn Sie eine Datei> Speichern ausführen und SVG auswählen. Sie erhalten "MyriadPro-Regular" anstelle von "Myriad Pro", wie Sie es vielleicht erwarten, und Ihr Browser funktioniert nicht wie Illustrator mit PostScript-Namen. Eine Problemumgehung besteht darin, Datei> Exportieren zum Speichern von SVGs zu verwenden, da der richtige Familienname anstelle des PostScript-Namens exportiert wird.
Michael Thompson
@Michael Thompson Wenn ich "Datei"> "Exportieren" wähle, ist SVG nicht eine der Optionen. Ich benutze CS5. Ist dies eine Option in früheren / späteren Versionen?
Max Starkenburg
@MaxStarkenburg: Das Export-Menü ändert sich stark zwischen den Versionen. In neueren Versionen gibt es drei Möglichkeiten zum Speichern / Exportieren in SVG: Datei> Speichern unter> (SVG-Typ auswählen); Datei> Exportieren> Exportieren als ...> (SVG-Typ auswählen) und Datei> Für Bildschirme exportieren> (SVG-Format hinzufügen).
Michael Thompson
4

Wie Sie bereits bemerkt haben, ist die Schriftart ein Verweis auf eine Schriftartdatei, die möglicherweise (oder möglicherweise nicht) für das System verfügbar ist, das versucht, das SVG zu öffnen. Die Lösung besteht darin, Ihren Typ in Pfade zu konvertieren, damit die Kurven explizit in der Datei gespeichert werden.

Es ist unklar, warum der Browser die Schriftart, auf die Sie verweisen möchten, möglicherweise nicht kennt, da davon ausgegangen wird, dass Sie auf demselben Computer testen, den Sie beim Erstellen der SVG-Datei verwendet haben. Es ist plausibel, dass die Schriftart in Illustrator auswählbar ist, jedoch nicht offiziell auf Betriebssystemebene installiert wurde.

Horatio
quelle
Ja, ich teste auf demselben Computer, auf dem ich die SVG-Datei erstelle. Und können Sie mich bitte korrigieren, wenn ich falsch liege? Ich habe Ihren ersten Teil der Antwort übernommen, da ich in der Eigenschaft "Schriftfamilie" einen bestimmten Pfad zur .ttf-Datei von Skia Regular angeben muss.
Rizwan606
Es ist Aufgabe des Browsers, den Namen der Schriftart einer installierten Schriftart zuzuordnen. "Nein", Sie geben ihm also keinen Pfad zu einer ttf. Die Referenz ähnelt der CSS-Schriftartensyntax, die eine durch Kommas getrennte Liste von Schriftfamilienstilen ermöglicht. Der Browser kann den Schriftartnamen unterschiedlich identifizieren.
Horatio
Beachten Sie, dass für Logos und verteilte Inhalte dieser Art (PDFs usw.), bei denen die Schriftart eine Rolle spielt, die Einbettung der Schriftart oder die Konvertierung in Pfade sinnvoll ist. Das Auflösen dieser Referenz ist möglicherweise keine gute Lösung, da Sie sich darauf verlassen können, dass Dritte die richtigen Schriften bereits installiert haben
Horatio
2

Archiv für das Web:

  1. Verwenden Sie Google-Schriftarten.
  2. mit nur zwei Schriftfamilien max.

Exportieren: Schriftarten: (Text: svg, Unterkonjunkt: keine). properties svg: (Stilelement).

Bearbeiten Sie sie innerhalb der Stile der resultierenden Datei:

  1. füge die Zeile "@import" hinzu.
  2. hänge "px" an alle Schriftgrößen an.
  3. benennen Sie den Schriftartnamen um.

Ergebnis:

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

rowilsonH
quelle
1
Diese Antwort ist zu knapp. Ich kann nicht einmal sagen, ob es sich um eine SVG-Datei oder eine andere Lösung handelt ...
jiggunjer
1

Möglicherweise ist auf Ihrem PC die Schriftfamilie (Skia-Regular) nicht lokal verfügbar. Wenn Sie also Ihre SVG-Datei in Ihrem Browser öffnen, wird diese mit der Standardsystemschrift dargestellt, die die meiste Zeit Times New Roman ist. Es gibt mehrere Problemumgehungen:

  1. Verwenden Sie @import, um auf die Google Fonts-API zuzugreifen (der Haken ist jedoch, dass dies nur dann funktioniert, wenn Sie Inline-SVG und Objekt-Tag-SVG verwenden, je nachdem, wie Sie Ihre SVG-Bilder in Ihre Website einbetten.)
  2. Konvertieren Sie Ihre Schriftarten in den Pfad (dies erhöht die Dateigröße und führt zu unscharfem Text, da Sie das ClearType- Rendering verloren haben).
  3. Betten Sie Schriften mit Nano in Ihre SVG-Datei ein

Weitere Informationen zur Verwendung benutzerdefinierter Schriftarten in SVG finden Sie hier: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/

tary3um
quelle