Wie verwende ich eine benutzerdefinierte Schriftart in einem SVG-Bild auf meiner Website?

28

Ich habe mit Inkscape ein benutzerdefiniertes Facebook-Symbol erstellt und es als SVG gespeichert. Es wird dieselbe Schriftart wie der Titel meiner Seite verwendet, die die Schriftart "Ubuntutitling-Bold-Webfont" verwendet, auf die ich in einer CSS-Datei als .woff verwiesen habe. Der Titel funktioniert, das SVG jedoch nicht - es zeigt das "f" in einer Art Standardschrift an. Die Schriftartendatei befindet sich in Relativität zur CSS- und Bilddatei unter ../fonts/ubuntutitling-bold-webfont.woff und in Relativität zur Webseite unter fonts / ubuntutitling-bold-webfont.woff.

I fount Wie binde ich Google Web Fonts in eine SVG ein? , aber ich bin ein bisschen verwirrt darüber, wie ich den Code auf die SVG anwenden soll, wenn ich es überhaupt brauche. Kann die SVG die in der CSS-Datei angegebene .woff-Schriftart verwenden? War die Art und Weise, wie ich die Schriftart in der SVG-Datei manuell geändert habe, korrekt?

Hier ist der Code für die SVG:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="80"
   height="80"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.3.1 r9886"
   sodipodi:docname="New document 1">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="26.573808"
     inkscape:cy="42.478414"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="1619"
     inkscape:window-height="611"
     inkscape:window-x="165"
     inkscape:window-y="301"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0.75006053,-981.36219)">
    <rect
       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="rect2987"
       width="70"
       height="70"
       x="4.2499394"
       y="986.36218"
       rx="10"
       ry="10" />
    <text
       xml:space="preserve"
       style="font-size:109.44319916px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#fffffe;stroke-width:2.73607969;stroke-opacity:1;font-family:ubuntutitling-bold-webfont';-inkscape-font-specification:ubuntutitling-bold-webfont'"
       x="25.989071"
       y="1096.0118"
       id="text3757"
       sodipodi:linespacing="125%"
       transform="scale(1.0381556,0.96324674)"><tspan
         sodipodi:role="line"
         id="tspan3759"
         x="25.989071"
         y="1096.0118"
         style="stroke-width:2.73607969">f</tspan></text>
  </g>
</svg>

Danke im Voraus.

Joe
quelle
Wie zeigt man die SVG an? Laden Sie es als <img>, betten Sie es als Objekt ein oder zeigen Sie das SVG inline an?
Ideogramm

Antworten:

19

Sie müssen CSS in den defsAbschnitt einfügen. So etwas wie:

<defs>
  <style type="text/css">
    @font-face {
      font-family: Delicious;
      src: url('../fonts/font.woff');
    }
  </style>
</defs>
Leighman
quelle
2
Laut meinem Beispiel github.com/marians/test-webfonts-in-svg funktioniert dies mit aktuellen Browsern nicht (Februar 2016).
Marian
13
Wenn Sie <object>zum Einbetten von svg verwenden, <img>wird die Schriftart ordnungsgemäß geladen! github.com/marians/test-webfonts-in-svg/pull/1
waldyrious
2
@waldyrious Für diesen Tipp gibt es nicht genug positive Stimmen auf der Welt.
Scribblemacher
@waldyrious was ist, wenn die SVG ein Hintergrundbild ist?
Notacouch
Verwenden <object>hat einige Nachteile. Nachdem ich vecta.io/blog/best-way-to-embed-svg durchgesehen hatte, entschied ich mich, das svg-Markup direkt in mein Dokument einzufügen .
Herman J. Radtke III
3

Um Google oder andere externe Fornts in die SVG-Datei zu laden, müssen Sie das style-Tag wie folgt in das defs-Tag einfügen:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="246" height="272" xml:space="preserve"><desc>Your description</desc>

<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>
muTheTechie
quelle
3
Laut meinem Beispiel github.com/marians/test-webfonts-in-svg funktioniert dies mit aktuellen Browsern nicht (Februar 2016).
Marian
1

Bearbeiten: Ich habe Ihre Frage noch einmal gelesen ... Ihre beste Möglichkeit scheint es zu sein, den Text in Ihrem Symbol in eine Gliederung umzuwandeln, sodass die Schriftart überhaupt nicht benötigt wird. (Möglicherweise müssen Sie Ihre Zeichensatzlizenz überprüfen, um festzustellen, ob dies in Ordnung ist.)

Ich habe fälschlicherweise angenommen, dass Sie ein Vektorsymbol hatten und nach der besten Möglichkeit suchten, es auf Ihrer Website anzuzeigen.


Ich denke, Sie haben ein paar Möglichkeiten.

Verwenden Sie ein SVG-Bild

Sie können die SVG-Datei auch als Bild verwenden. Sie verlieren die Unterstützung für ältere IE-Versionen, können jedoch PNG- oder GIF-Dateien für IE8 und frühere Versionen austauschen. Oder kümmern Sie sich nicht um die Unterstützung von IE8 und älteren Versionen (kann je nach Zielgruppe eine Option sein oder auch nicht).

Verwenden Sie den Generator von Font Squirrel

Font Squirrel verfügt über einen @ font-face-Generator, der alles für Sie erledigt, wenn Sie die Schriftart bereits erstellt haben.

Font Squirrel @ Font-Face-Generator

Verwenden Sie ein PNG-Bild

Warum benutzt du SVG? Ist es für besseren Zoom und hohe DPI-Unterstützung? Wenn ja, gibt es Möglichkeiten, dies mit CSS und PNGs zu tun. Es hängt wirklich von Ihrem Verwendungszweck ab.


Ich bin kein Fan davon, Icons in Schriften einzubetten. Sie verlieren die Kontrolle über die Pixelebene. Es gibt einige Situationen, in denen dies eine gute Wahl ist, aber oft ist es viel mehr Aufwand, der sich lohnt und schlechtere Ergebnisse liefert.

Marc Edwards
quelle
-2
<defs>
 <style type="text/css">
 <![CDATA[
  @font-face {
    font-family: 'Fredoka One';
    font-style: normal;
    font-weight: 400;
    src: local('Fredoka One'), local('FredokaOne-Regular'), 
    url(https://fonts.gstatic.com/s/fredokaone/v7/k3kUo8kEI- 
    tA1RRcTZGmTlHGCac.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 
    U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, 
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  ]]>
 </style>
</defs>

Das ist ein Beispiel für die folgende Schriftart. https://fonts.googleapis.com/css?family=Fredoka One Open Besuchen Sie die Schriftseite und kopieren Sie alles in "defs"

Unsichtbar
quelle
2
Willkommen auf der GDSE! Der Link führt nirgendwo hin für mich. Könnten Sie bitte Ihre Antwort bearbeiten, um die relevanten Informationen hinzuzufügen?
neugierig