Alternative Schriftfamilie für Text in SVG-Datei

Kontext

Umfeld

SVG-Datei in Inkscape 0.92.3 auf Windows 10 Pro x64

Problem

Webbrowser geben den „Gone Home“-Text nicht wieder.

Beschreibung

Ich habe in Inkscape eine SVG-Datei erstellt, die Text mit der Schriftart Elephant enthält. Leider rendert der Webbrowser [1] , der das Bild anzeigen soll, den Text überhaupt nicht. Ich nehme an, der Browser hat nicht die richtige Schriftart installiert? [2]

Das gleiche Problem tritt manchmal auf, wenn ich mit CSS für Websites arbeite. Die Lösung in diesen Fällen besteht darin, alternative Schriftarten zu verwenden, die die Browser verwenden können, wie unten.

font-family: Elephant, Arial, Helvetica, sans-serif;

Fragen

  1. Ist es möglich, alternative Schriftarten in einer SVG-Datei für Anwendungen anzugeben, die beim Rendern von Text verwendet werden sollen? [3]
  2. Wenn ja, wie wird es in Inkscape 0.92.3 gemacht?

Gebrauchte Lösung

Die ursprüngliche SVG-Datei verwendete Fließtext ( <flowRoot>) anstelle von normalem Text ( <text>).

Wählen Sie in Inkscape den Text aus und verwenden Sie Text > In Text konvertieren .

Anmerkungen

  1. Getestet habe ich mit Chrome, Firefox und Internet Explorer.
  2. Obwohl die Schriftart in Windows installiert ist.
  3. Das bedeutet, dass die Anwendung die zweite Schriftart verwendet, wenn sie die erste nicht hat und so weiter.
Besser wäre es, den Text in Pfade umzuwandeln: "Pfad > Objekt zu Pfad". Wenn ich den Text unbedingt als Text behalten möchte, kann ich ihn aus dem SVG entfernen, in ein benachbartes Div einfügen und über das SVG-Bild legen - so: jsfiddle.net/9kjaorp6/1
Willkommen auf GD.SE, Björn. Wie @Moini schreibt, hängen die Probleme mit dem fließenden Text zusammen und nicht mit der Elephant-Schriftart (die normalerweise in Windows-Systemen enthalten ist) oder der alternativen Schriftart. Ich habe versucht, den fließenden Text zu löschen und ein normales Textfeld einzufügen, und der Text wird vom Browser gerendert.
Nur ein paar Kleinigkeiten: Das Problem mit dem fließenden Text wird in Inkscape Version 1.0 verschwinden, es wird bereits daran gearbeitet. Dann wird es eine neue Art von Fließtext geben und einen Fallback für diejenigen Zuschauer, die ihn nicht implementieren.

Antworten (2)

Das Problem ist, dass Sie Fließtext in Ihrer Datei verwenden. Fließtext ist nicht im SVG-Standard (er wurde geplant, in Inkscape implementiert, dann aus dem Standard entfernt und wegen seiner Nützlichkeit in Inkscape beibehalten).

Verwenden Sie 'Pfad > Objekt zu Pfad' oder 'Text > In Text konvertieren' (wenn Sie den Text als Text behalten müssen)

Danke für deinen Beitrag. Das 'In Text konvertieren' war sehr nützlich! Leider kann ich Ihre Antwort aufgrund meines schlechten Rufs auf diesem StackExchange nicht positiv bewerten.

Es wird entweder nicht gerendert, weil diese Schriftart nicht auf anderen Computern installiert ist, auf denen die SVG-Datei angezeigt wird, oder vielleicht liegt ein Problem mit der Schriftartdatei selbst oder eine Inkompatibilität mit Inkscape vor. Ich glaube nicht, dass es etwas mit dem Browser an sich zu tun hat. Browser haben keine Schriftarten – sie können Systemschriftarten und Webschriftarten verwenden. Letztendlich kann ich diesen Teil Ihrer Frage nicht wirklich beantworten, da ich die Schriftart nicht habe, um sie zu überprüfen, und die Schriftart nicht kostenlos ist . Ich kaufe es nicht, um es herauszufinden.

Wie auch immer, die Lösung ist einfach genug - und das sollten Sie wahrscheinlich mit jedem für das Web erstellten SVG tun, unabhängig von der verwendeten Schriftart, um Probleme mit fehlenden Schriftarten zu vermeiden.

  1. Wählen Sie alle Textfelder im Inkscape-Dokument aus.
  2. Klicken Sie auf Pfad > Objekt zu Pfad . Dadurch wird der gesamte Text in Konturen umgewandelt
  3. Speichern* Sie das SVG

Jetzt wird der gesamte Text auf jedem Computer korrekt angezeigt, unabhängig davon, welche Schriftarten installiert sind.

*Hinweis: Wenn Sie das SVG zur Verwendung auf einer Webseite speichern, stellen Sie sicher, dass Sie Ihre Originalvorlage (die Sie bereits gespeichert haben sollten) nicht überschreiben. Wählen Sie aus, es unter einem anderen Dateinamen zu speichern. Sobald Text in Konturen umgewandelt wurde, ist er unumkehrbar und Sie müssen den Text erneut eingeben, wenn Sie ihn bearbeiten möchten.

Danke für deinen Beitrag. Die Informationen darüber, wie man Text websicher macht, indem man ihn in Pfade umwandelt, waren sehr aufschlussreich! Leider kann ich Ihre Antwort aufgrund meines schlechten Rufs auf diesem StackExchange nicht positiv bewerten.
Alternative Schriftfamilie für Text in SVG-Datei
AntwortenHierDatenschutz-Bestimmungen1y, 0v