Inkscape kullanarak özel bir Facebook simgesi yarattım ve onu svg olarak kaydettim. Bir CSS dosyasında .woff olarak adlandırdığım "ubuntutitling-bold-webfont" yazı tipini kullanan sayfamın başlığıyla aynı yazı tipini kullanır. Başlık çalışıyor, ancak svg çalışmıyor - bir sıralama varsayılan yazı tipinde "f" yi gösteriyor. Yazı tipi dosyası, CSS ve görüntü dosyasına göreceli olarak ../fonts/ubuntutitling-bold-webfont.woff adresinde ve web sayfasına göreceli olarak font / ubuntutitling-bold-webfont.woff adresinde bulunur.

Ben memba Bir SVG içine Google Web Yazı Tipleri gömmek nasıl? , ancak gerekirse kodun SVG'ye nasıl uygulanacağı konusunda kafam biraz karıştı. SVG, CSS dosyasında referans verilen .woff fontunu kullanabilir mi? SVG dosyasının içindeki yazı tipini manuel olarak değiştirme biçimim doğru muydu?

İşte SVG'nin kodu:

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

Şimdiden teşekkür ederim.

Bölüme CSS koymanız gerekir defs. Gibi bir şey:

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

Google’ı veya başka bir harici formayı SVG dosyasına yüklemek için, stil etiketini defs etiketine şu şekilde eklemek zorundayız:

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

Düzenleme: Sorunuzu yeniden okudum ... en iyi seçeneğiniz, simgenizdeki metni bir taslak haline dönüştürmek olabilir, bu yüzden yazı tipine hiç gerek duymuyor olabilir. (Bunun uygun olup olmadığını görmek için font lisansınızı kontrol etmeniz gerekebilir.)

Yanlış, bir vektör simgesine sahip olduğunuzu ve web sitenizde görüntülemenin en iyi yolunu aradığınızı varsaydım.

Bence birkaç seçeneğin var.

Bir SVG resmi kullanın

SVG'yi bir görüntü olarak kullanabilirsiniz. IE'nin eski sürümleri için desteğini kaybedeceksiniz, ancak IE8 ve önceki sürümleri için bir PNG veya GIF ile takas edebilirsiniz. Ya da IE8 ve daha eski desteklerden rahatsız olmayın (hedef kitlenize bağlı olarak bir seçenek olabilir veya olmayabilir).

Yazı Tipi Sincap'ın üretecini kullan

Font Squirrel, zaten oluşturulmuş font varsa, sizin için tüm ağır yükleri kaldıran bir @ font-face jeneratörüne sahiptir.

Yazı Tipi Squirrel @ font-face generator

Bir PNG resmi kullanın

Neden SVG kullanıyorsunuz? Daha iyi zoom ve yüksek DPI desteği için mi? Öyleyse, bunu CSS ve PNG'lerle yapmanın yolları var. Bu gerçekten kullanım amacınıza bağlı.

Yazı tiplerine simgelerin gömülmesinin hayranı değilim. Piksel seviyesi kontrolünü kaybedersiniz. Bunu yapmanın iyi bir seçim olduğu birkaç durum vardır, ancak genellikle buna değmesi ve daha kötü sonuçlar vermesi çok daha fazla çaba harcar.

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

Bu, aşağıdaki yazı tipine bir örnek. https://fonts.googleapis.com/css?family=Fredoka One Open, font sayfasını ziyaret edin ve her şeyi "def" e kopyalayın