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.

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>

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>

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.

<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"