Za pomocą Inkscape stworzyłem niestandardową ikonę Facebooka i zapisałem ją jako plik svg. Używa tej samej czcionki, co tytuł mojej strony, która używa czcionki „ubuntutitling-bold-webfont”, o której wspomniałem jako plik .woff w pliku CSS. Tytuł działa, ale svg nie - wyświetla „f” czcionką domyślną. Plik czcionek znajduje się w ../fonts/ubuntutitling-bold-webfont.woff w odniesieniu do pliku CSS i pliku obrazu, a w fonts / ubuntutitling-bold-webfont.woff w odniesieniu do strony internetowej.

Iount Jak osadzić czcionki internetowe Google w pliku SVG? , ale jestem nieco zdezorientowany, jak zastosować kod do SVG, jeśli w ogóle muszę. Czy SVG może używać czcionki .woff wymienionej w pliku CSS? Czy sposób ręcznej zmiany czcionki w pliku SVG był prawidłowy?

Oto kod 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>

Z góry dziękuję.

Musisz umieścić CSS w defssekcji. Coś jak:

<defs>
  <style type="text/css">
    @font-face {
      font-family: Delicious;
      src: url('../fonts/font.woff');
    }
  </style>
</defs>

Aby załadować Google lub inne zewnętrzne forty w pliku SVG, musimy dodać tag stylu do tagu defs w następujący sposób:

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

Edycja: Ponownie przeczytałem twoje pytanie ... wydaje się, że najlepszą opcją może być przekonwertowanie tekstu w ikonie na kontur, więc w ogóle nie potrzebuje czcionki. (Może być konieczne sprawdzenie licencji na czcionki, aby sprawdzić, czy jest to w porządku).

Niepoprawnie założyłem, że masz ikonę wektorową i szukałeś najlepszego sposobu wyświetlenia jej na swojej stronie internetowej.

Myślę, że masz kilka opcji.

Użyj obrazu SVG

Możesz po prostu użyć SVG jako samego obrazu. Utracisz obsługę starszych wersji IE, ale możesz zamienić format PNG lub GIF dla IE8 i wcześniejszych. Lub nie przejmuj się obsługą IE8 i starszymi (może, ale nie musi być opcją, w zależności od grupy docelowej).

Użyj generatora Font Squirrel

Czcionka Squirrel ma generator czcionek @, który wykonuje wszystkie ciężkie podnoszenie za Ciebie, jeśli masz już utworzoną czcionkę.

Generator czcionek Squirrel @ font-face

Użyj obrazu PNG

Dlaczego używasz SVG? Czy to zapewnia lepsze zbliżenie i obsługę wysokich DPI? Jeśli tak, to można to zrobić za pomocą CSS i PNG. To naprawdę zależy od zamierzonego zastosowania.

Nie jestem fanem osadzania ikon w czcionkach. Tracisz kontrolę poziomu pikseli. Jest kilka sytuacji, w których jest to dobry wybór, ale często jest to o wiele większy wysiłek, który jest wart i przynosi gorsze wyniki.

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

To przykład dla następującej czcionki. https://fonts.googleapis.com/css?family=Fredoka One Open odwiedź stronę czcionki i skopiuj wszystko do „defs”