Bagaimana cara menggunakan font khusus dalam gambar SVG di situs saya?


28

Saya membuat ikon Facebook kustom menggunakan Inkscape dan menyimpannya sebagai svg. Ia menggunakan font yang sama dengan judul halaman saya, yang menggunakan font "ubuntutitling-bold-webfont", yang saya rujuk sebagai .woff dalam file CSS. Judul berfungsi, tetapi svg tidak - ia menampilkan "f" dalam beberapa jenis font default. File font terletak di ...

Saya menemukan Bagaimana cara menyematkan Font Web Google ke dalam SVG? , tapi saya agak bingung tentang cara menerapkan kode ke SVG, jika saya perlu. Bisakah SVG menggunakan font .woff yang direferensikan dalam file CSS? Apakah cara saya mengubah font di dalam file SVG secara manual benar?

Berikut adalah kode untuk 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>

Terima kasih sebelumnya.


Bagaimana Anda menampilkan SVG? Apakah Anda memuatnya sebagai <img>, apakah Anda menanamkannya sebagai objek atau apakah Anda menampilkan SVG inline?
Ideogram

Jawaban:


19

Anda harus meletakkan CSS di defsbagian ini. Sesuatu seperti:

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

2
Menurut contoh saya github.com/marians/test-webfonts-in-svg , ini tidak berfungsi dengan browser saat ini (Februari 2016).
Marian

13
Jika Anda menggunakan <object>untuk menanamkan svg, bukan <img>, maka font memuat dengan benar! github.com/marians/test-webfonts-in-svg/pull/1
waldyrious

2
@waldyrious Tidak ada cukup banyak upvotes di dunia untuk tip itu.
Scribblemacher

@waldyrious bagaimana jika SVG adalah gambar latar belakang?
notacouch

Menggunakan <object>memiliki beberapa kelemahan. Setelah meninjau vecta.io/blog/best-way-to-embed-svg, saya memutuskan untuk memasukkan markup svg langsung ke dokumen saya.
Herman J. Radtke III

3

Untuk memuat Google atau fornts eksternal lainnya dalam file SVG, kita harus menambahkan tag gaya di tag defs sebagai berikut:

<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
Menurut contoh saya github.com/marians/test-webfonts-in-svg , ini tidak berfungsi dengan browser saat ini (Februari 2016).
Marian

1

Sunting: Saya membaca ulang pertanyaan Anda ... sepertinya pilihan terbaik Anda adalah mengubah teks di ikon Anda menjadi garis besar, jadi tidak perlu font sama sekali. (Anda mungkin harus memeriksa lisensi font Anda untuk melihat apakah ini ok.)

Saya berasumsi, secara keliru, bahwa Anda memiliki ikon vektor dan Anda sedang mencari cara terbaik untuk menampilkannya di situs web Anda.


Saya pikir Anda memiliki beberapa opsi.

Gunakan gambar SVG

Anda bisa menggunakan SVG sebagai gambar itu sendiri. Anda akan kehilangan dukungan untuk versi IE yang lebih lama, tetapi Anda bisa bertukar dalam PNG atau GIF untuk IE8 dan yang lebih lama. Atau tidak peduli tentang IE8 dan dukungan lama (mungkin atau mungkin bukan opsi, tergantung pada audiens target Anda).

Gunakan generator Font Squirrel

Font Squirrel memiliki generator font @ wajah yang melakukan semua mengangkat berat untuk Anda, jika Anda sudah memiliki font yang dibuat.

Font Squirrel @ font-face generator

Gunakan gambar PNG

Mengapa Anda menggunakan SVG? Apakah ini untuk zoom yang lebih baik dan dukungan DPI tinggi? Jika demikian, ada cara untuk melakukannya dengan CSS dan PNG. Ini benar-benar tergantung pada penggunaan yang Anda maksudkan.


Saya bukan penggemar menyematkan ikon di font. Anda kehilangan kontrol level piksel. Ada beberapa situasi di mana melakukan hal itu adalah pilihan yang baik, tetapi sering kali lebih banyak upaya yang layak dan menghasilkan hasil yang lebih buruk.


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

Itu contoh untuk font berikut. https://fonts.googleapis.com/css?family=Fredoka One Open, kunjungi halaman font dan salin semuanya ke "defs"


2
Selamat datang di GDSE! Tautan tidak mengarah ke mana pun untuk saya, bisakah Anda mengedit jawaban Anda untuk menambahkan informasi yang relevan?
penasaran
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.