Beibehalten des Schrifttyps in der Illustrator-SVG-Datei

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

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.

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!

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.

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

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/