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.

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>

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>

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.

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