Wie binde ich Google Web Fonts in eine SVG ein?

Ich schreibe auf meiner Website einen Artikel über die Vorteile neuer Webtechnologien, unter anderem HTML5, CSS3 und SVGs. Einer der Vorteile der letzteren ist die Möglichkeit, Text in einem ansonsten effektiven Bild auszuwählen.

Ich bin neu in SVGs und habe gerade meine erste anständige Grafik in Illustrator erstellt. Ich habe es in eine Seite mit dem GWF-Skript für die Ubuntu-Schriftart im Tag eingebettet. Wie sich herausstellt, wird die Ubuntu-Schriftart im regulären Text korrekt angezeigt. Damit dieser Trick in der SVG funktioniert, muss das Google-Skript in die SVG selbst eingebettet sein. Wie kann ich das machen?

Sie binden Schriftarten in CSS ein, indem Sie die Base64-Codierung verwenden. Sie können Stile in SVG-Dokumenten anwenden, die CSS ähneln, indem Sie ein <style />Element verwenden. Wenn Sie also eine WOFF-Schriftart haben, würden Sie sie folgendermaßen einbetten:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

Wo ...sind die Base64-codierten Schriftdaten?

Beispiele hierfür finden Sie in den Stylesheets von Typekit. Ich bin nicht sicher, ob der MIME-Typ font/woffkorrekt ist, da ich auch Leute gesehen habe, die behaupten, dass es sein sollte application/font-woff. Obwohl font/woff, font/truetype, font/opentypeetc. scheinen beliebt zu sein.

Alternativ können Sie auch die SVG-Version der Web-Schriftart verwenden und das Beschreibungs-Markup der SVG-Schriftart in Ihr Dokument einbetten (obwohl die Browser-Unterstützung nach wie vor sehr eingeschränkt ist, wie Luke in den Kommentaren festhält).

Sie sollten jedoch auch in der Lage sein, eine Verknüpfung zu einer externen Schriftart gemäß der SVG-Spezifikation herzustellen . Das scheint die beste Lösung zu sein, wenn Sie mehrere SVG-Dokumente haben, die auf diese Schriftart verweisen.

Ein <defs>Abschnitt wie

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

funktioniert.

Sie können Google Web Fonts mit Nano direkt in Ihre SVG- Datei einbetten . Es scannt automatisch Ihre SVG-Datei und bettet selektiv nur die benötigten Schriftarten ein, um sicherzustellen, dass Ihre Ubuntu-Schriftarten auf allen modernen Browsern gleich aussehen. In meinem Fall brauchte ich Roboto, um in meine SVG eingebettet zu werden:

Haftungsausschluss: Ich bin mit dem Team hinter Nano zusammen, und auch wir hatten zuvor das gleiche Problem. Daher haben wir uns entschlossen, unseren eigenen Juckreiz durch den Bau von Nano zu bekämpfen. Hoffe das ist hilfreich!

Bearbeiten: Hier ist eine kurze Erklärung, was hinter den Kulissen passiert:

Um Schriften in SVG einzubetten, müssen Sie zunächst wissen, welche Schriftfamilien verwendet werden. Dann müssen Sie diese Schriftdateien finden und herunterladen. Nach dem Herunterladen müssen Sie reguläre, fette, kursive und fette Kursive in Base 64-Codierung konvertieren. Wenn Sie es manuell tun, ist es eine enorme Arbeit, über eine große Anzahl von Dateien zu wissen, welche Datei Fettdruck verwendet und welche nicht. Dann müssen Sie alle 4 Base 64-codierten Zeichenfolgen in Ihre SVG-Datei kopieren.

Aus diesem Grund erstellen wir Nano und stellen sicher, dass es SVG automatisch scannt und nur die verwendeten Schriftarten einfügt. Wenn beispielsweise Fettdruck nicht verwendet wird oder kein Text vorhanden ist, werden keine Schriftarten eingebettet. Alles, was Sie tun müssen, ist Ihr SVG per Drag & Drop in Nano zu verschieben und es funktioniert wie ein Zauber! Weitere Informationen finden Sie hier: https://vecta.io/blog/making-svg-easier-to-use

Dies ist möglicherweise zu einfach, aber haben Sie darüber nachgedacht, die Schriftart als Zip-Datei von Google herunterzuladen und Illustrator sie dann nach Bedarf in Ihre SVG-Dateiausgabe konvertieren zu lassen?

Dies ist nur theoretisch, da ich dies noch nicht ausprobiert habe, aber theoretisch scheint es zu funktionieren.

Fügen Sie nach dem <desc>Tag Folgendes hinzu

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

UPDATE zu meiner Antwort. Ich bevorzuge jetzt eine andere Antwort auf dieser Seite, die Nano verwenden soll: https://graphicdesign.stackexchange.com/a/121950/45239

Angenommen, Sie haben eine Web-Schriftart heruntergeladen und auf Ihrem System installiert und eine SVG-Datei erstellt (möglicherweise mit den gleichen Schritten wie unten beschrieben, aber ohne "Schriftart: In Umrisse konvertieren"), können Sie die SVG-Datei in Nano hochladen Zeigen Sie die Option "Schriftart einbetten: Ja" an und klicken Sie auf "Herunterladen".

Meine vorherige Antwort:

Wenn Sie bereit sind, auf wählbaren Text und SEO zu verzichten:

1. Laden Sie die Web-Schriftart herunter.
2. Installieren Sie es lokal.
3. Öffnen Sie Adobe Illustrator
4. Tippe deinen Text.
5. Datei> Exportieren> Exportieren als ...
6. Wähle ".SVG"

7. Wählen Sie diese Einstellungen:

   • Styling: Inline Style
   • Schriftart: In Konturen konvertieren
   • : Konserve
   • Objekt-IDs: Layernamen
   • Dezimalzahl: 2
   • (aktiviert) Verkleinern
   • (aktiviert) Responsive

8. Laden Sie die resultierende Datei optional auf https://vecta.io/nano hoch. (Die Dateigröße konnte um 8,2% reduziert werden.)