Schriftart in Illustrator-SVG-Datei beibehalten

Wenn Sie sicher sein wollen, dass der Text in jedem Fall gleich aussieht -

Zuerst können Sie den Text erweitern, bevor Sie ihn als SVG speichern

Zweitens können Sie im Schriftartenteil des Speicherdialogs auf "In Gliederung umwandeln" klicken.

Der Grund, warum die Schriftart nicht korrekt in der tatsächlichen Schriftart dargestellt wird, liegt daran, dass die SVG-Datei mit der Illustrator-Anwendung gespeichert wird. Die Anwendung wandelt das Design automatisch in Code um. Und bei genauer Beobachtung stimmt der Schriftartname im Code nicht mit der tatsächlich im System installierten Schriftart überein.

Um das Problem der Schriftwiedergabe zu lösen, müssen Sie den SVG-Code aus Illustrator kopieren und den Schriftnamen so ändern, dass er mit dem Namen der in Ihrem System installierten Schrift übereinstimmt. (Beispiel: Schriftartname innerhalb des SVG-Codes, der aus Illustrator „Arial-Regular“ stammt, aber der Name der in Ihrem System installierten Schriftart lautet „Arial Regular“. Hier müssen Sie den Code ändern, um Font-Family als „Arial Regular ".)

Dies löst Ihr Problem, ohne dass Sie Schriftarten in Konturen konvertieren müssen.

Hoffe das hilft!

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

Warum der Browser die Schriftart, auf die Sie verweisen möchten, möglicherweise nicht erkennt, ist unklar, da ich davon ausgehe, 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, aber nicht offiziell auf Betriebssystemebene installiert ist.

Archiv für Web:

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

Export: Schriftarten: (Text: svg, Nebenkonjunktur: keine). Eigenschaften svg: (Stilelement).

Bearbeiten Sie sie innerhalb der Stile der resultierenden Datei:

1. Zeile "@import" anhängen.
2. hängen Sie "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;}

Es besteht die Möglichkeit, dass auf Ihrem PC die Schriftdatei der Schriftfamilie (Skia-Regular) nicht lokal verfügbar ist. Wenn Sie also Ihre SVG-Datei in Ihrem Browser öffnen, wird sie mit der Standardsystemschrift gerendert, die meistens Times New Roman ist. Es gibt mehrere Problemumgehungen:

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

Hier können Sie mehr über die Verwendung benutzerdefinierter Schriftarten in SVG lesen: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/

Sie können die verwendete Schriftart direkt in Ihre SVG-Datei einbetten. Auf diese Weise wird unabhängig von den auf dem System des Benutzers installierten Schriftarten die richtige Schriftart gerendert. Die CLI-Tools Nano oder svg-body können das. Beide Tools unterstützen jedoch nur Google-Schriftarten.

Haftungsausschluss: Ich bin der Autor von svg-buddy. Ich hoffe, dass dieses Open-Source-Tool für andere nützlich ist.