Jak korzystać z niestandardowej czcionki w obrazie SVG w mojej witrynie?


28

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


Jak wyświetlić SVG? Czy ładujesz go jako <img>, czy osadzasz go jako obiekt, czy wyświetlasz plik SVG?
Ideogram

Odpowiedzi:


19

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>

2
Według mojego przykładu github.com/marians/test-webfonts-in-svg , to nie działa z obecnymi przeglądarkami (luty 2016).
Marian

13
Jeśli użyjesz <object>do osadzenia pliku svg <img>, to czcionka ładuje się poprawnie! github.com/marians/test-webfonts-in-svg/pull/1
waldyrious 10.10.16

2
@waldyrious Na świecie nie ma wystarczającej liczby głosów pozytywnych na tę wskazówkę.
Scribblemacher

@waldyrious co jeśli SVG jest obrazem tła?
notacouch

Korzystanie <object>ma pewne wady. Po przejrzeniu vecta.io/blog/best-way-to-embed-svg postanowiłem wstawić znacznik svg bezpośrednio do mojego dokumentu.
Herman J. Radtke III

3

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>

3
Według mojego przykładu github.com/marians/test-webfonts-in-svg , to nie działa z obecnymi przeglądarkami (luty 2016).
Marian

1

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.


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

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”


2
Witamy w GDSE! Link nie prowadzi nigdzie dla mnie, czy możesz edytować swoją odpowiedź, aby dodać odpowiednie informacje?
ciekawy
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.