मैं अपनी साइट पर एसवीजी छवि में कस्टम फ़ॉन्ट का उपयोग कैसे करूं?

Question

मैंने Inkscape का उपयोग करके एक कस्टम फेसबुक आइकन बनाया और इसे svg के रूप में सहेजा। यह मेरे पृष्ठ के शीर्षक के समान फ़ॉन्ट का उपयोग करता है, जो फ़ॉन्ट "ubuntutitling-bold-webfont" का उपयोग करता है, जिसे मैंने CSS फ़ाइल में .woff के रूप में संदर्भित किया है। शीर्षक कार्य करता है, लेकिन svg नहीं करता है - यह कुछ प्रकार के डिफ़ॉल्ट फ़ॉन्ट में "एफ" प्रदर्शित करता है। फ़ॉन्ट फ़ाइल सीएसएस और छवि फ़ाइल के सापेक्षता में ../fonts/ubuntutitling-bold-webfont.woff पर स्थित है, और वेब पेज के लिए सापेक्षता में फ़ॉन्ट / ubuntutitling-bold-webfont.woff पर है।

मैं फव्वारा कैसे करूं मैं एक एसवीजी में Google वेब फ़ॉन्ट्स कैसे एम्बेड करूं? , लेकिन मैं थोड़ा उलझन में हूँ कि एसवीजी को कोड कैसे लागू किया जाए, अगर मुझे भी ज़रूरत है। क्या CSS फ़ाइल में SVG .woff फ़ॉन्ट का उपयोग किया जा सकता है? क्या मैंने SVG फ़ाइल के अंदर फ़ॉन्ट को मैन्युअल रूप से बदला था?

यहाँ 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>

पहले ही, आपका बहुत धन्यवाद।

Comments

आप एसवीजी कैसे प्रदर्शित करते हैं? क्या आप इसे <img> के रूप में लोड करते हैं, क्या आप इसे एक ऑब्जेक्ट के रूप में एम्बेड करते हैं या क्या आप एसवीजी इनलाइन प्रदर्शित करते हैं?

— आईडोग्राम

Answer 1

आपको defsअनुभाग में सीएसएस लगाने की आवश्यकता है । कुछ इस तरह:

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

Comments

मेरे उदाहरण github.com/marians/test-webfonts-in-svg के अनुसार , यह वर्तमान ब्राउज़र (फरवरी 2016) के साथ काम नहीं करता है।

— मैरियन

यदि आप <object>इसके बजाय svg एम्बेड करने के लिए उपयोग करते हैं <img>, तो फ़ॉन्ट ठीक से लोड होता है! github.com/marians/test-webfonts-in-svg/pull/1

— वाल्ड्रिएस

@waldyrious उस टिप के लिए दुनिया में पर्याप्त upvotes नहीं है।

— स्क्रिब्बलमैकर

@waldyrious यदि SVG बैकग्राउंड इमेज है तो क्या होगा?

— नॉटचूच

का उपयोग <object>कर कुछ downsides है। Vecta.io/blog/best-way-to-embed-svg की समीक्षा करने के बाद मैंने अपने दस्तावेज़ में svg मार्कअप को इनलाइन करने का निर्णय लिया।

— हरमन जे। रैडके III

Answer 2

एसवीजी फ़ाइल में Google या किसी अन्य बाहरी फ़ॉरेस्ट को लोड करने के लिए, हमें निम्न प्रकार से टैग टैग में स्टाइल टैग जोड़ना होगा:

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

Comments

मेरे उदाहरण github.com/marians/test-webfonts-in-svg के अनुसार , यह वर्तमान ब्राउज़र (फरवरी 2016) के साथ काम नहीं करता है।

— मैरियन

Answer 3

संपादित करें: मैं आपके प्रश्न को फिर से पढ़ता हूं ... ऐसा लगता है कि आपका सबसे अच्छा विकल्प आपके आइकन में पाठ को एक रूपरेखा में बदलना हो सकता है, इसलिए इसे फ़ॉन्ट की आवश्यकता नहीं है। (यह ठीक है या नहीं यह देखने के लिए आपको अपने फ़ॉन्ट लाइसेंस की जांच करनी पड़ सकती है।)

मैंने गलत तरीके से मान लिया, कि आपके पास एक वेक्टर आइकन था और आप इसे अपनी वेबसाइट में प्रदर्शित करने का सबसे अच्छा तरीका ढूंढ रहे थे।

---

मुझे लगता है कि आपके पास कुछ विकल्प हैं।

एसवीजी छवि का उपयोग करें

आप केवल एक छवि के रूप में एसवीजी का उपयोग कर सकते हैं। आप IE के पुराने संस्करणों के लिए समर्थन खो देंगे, लेकिन आप IE8 और उससे पहले के PNG या GIF में स्वैप कर सकते हैं। या IE8 और पुराने समर्थन के बारे में परेशान न करें (आपके लक्षित दर्शकों के आधार पर एक विकल्प हो सकता है या नहीं भी हो सकता है)।

फ़ॉन्ट गिलहरी के जनरेटर का उपयोग करें

फ़ॉन्ट गिलहरी में एक @ फ़ॉन्ट-चेहरा जनरेटर है जो आपके लिए सभी भारी उठाने का काम करता है, यदि आपके पास पहले से ही फ़ॉन्ट बनाया गया है।

फ़ॉन्ट गिलहरी @ फ़ॉन्ट-चेहरा जनरेटर

PNG छवि का उपयोग करें

आप एसवीजी का उपयोग क्यों कर रहे हैं? क्या यह बेहतर ज़ूम और उच्च डीपीआई समर्थन के लिए है? यदि हां, तो सीएसएस और पीएनजी के साथ ऐसा करने के तरीके हैं। यह वास्तव में आपके इच्छित उपयोग पर निर्भर करता है।

---

मैं फोंट में प्रतीक एम्बेड करने का प्रशंसक नहीं हूं। आप पिक्सेल स्तर नियंत्रण खो देते हैं। कुछ स्थितियां ऐसी हैं जहां ऐसा करना एक अच्छा विकल्प है, लेकिन अक्सर यह अधिक प्रयास है कि यह लायक हो और खराब परिणाम देता है।

Answer 4

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

यह वें निम्नलिखित फ़ॉन्ट के लिए एक उदाहरण है। https://fonts.googleapis.com/css?family=Fredoka एक फ़ॉन्ट पृष्ठ पर जाएं और "दोष" में सब कुछ कॉपी करें

Comments

GDSE में आपका स्वागत है! लिंक मेरे लिए कहीं नहीं जाता है, क्या आप प्रासंगिक जानकारी जोड़ने के लिए अपना जवाब संपादित कर सकते हैं?

— जिज्ञासु