SVG
फोंट बनाना

परिचय

टिप्पणियों

एक साधारण फ़ॉन्ट

एक svg फ़ॉन्ट का एक सरल उदाहरण। यहाँ ध्यान देने योग्य कुछ बातें:

• ग्लिफ़ की समन्वय प्रणाली svg में सामान्य समन्वय प्रणाली के विरोध में है। y अक्ष ऊपर की ओर इंगित करता है । बिंदु 0,0 निचले दाएं कोने में है।
• एक फ़ॉन्ट में सभी रास्तों को घड़ी की विपरीत दिशा में खींचा जाना चाहिए।
• अधिकांश उपकरणों में केवल ग्लिफ़ तत्व की घ विशेषता का समर्थन किया जाता है। बाल तत्व काम नहीं करेंगे, हालांकि उन्हें तकनीकी रूप से अनुमति है।

<svg xmlns="http://www.w3.org/2000/svg">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode="a" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
    <glyph unicode="b" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
  </font>
</svg>

यदि आपके पास व्यापक या संकीर्ण ग्लिफ़ हैं, तो केवल ग्लिफ़ तत्व पर क्षितिज-एड-एक्स को बदलें।

<glyph unicode="a" horiz-adv-x="512" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />

फ़ॉन्ट चुनना

यूनिकोड संपत्ति का उपयोग बाद के ग्लिफ़ चयन के लिए किया जाता है। आप साधारण अक्षरों या यूनिकोड कोडपॉइंट्स के साथ-साथ लिगर्स (अक्षरों का संयोजन या यूनिकोड कोडपॉइंट्स) का उपयोग कर सकते हैं

• unicode="abc"
• unicode="ab"
• unicode="abab"
• unicode="a"
• unicode="b"

ग्लिफ़ को हमेशा पहले मैच के द्वारा चुना जाता है, इसलिए किसी भी एक चरित्र से पहले सभी लिगमेंट होते हैं।

यूनिकोड कोडपॉइंट को दशमलव में लिखा जा सकता है { या हेक्साडेसिमल &#x1f संकेतन में।

चढ़ाई, वंश और आधार रेखा

इकाइयां-प्रति-ई संपत्ति सबसे महत्वपूर्ण फ़ॉन्ट गुणों में से एक है। इसका उपयोग किसी भी अन्य संपत्ति के किसी भी मूल्य को किसी भी अर्थ देने के लिए किया जाता है।

CSS2 फॉन्ट स्पेक में em sqare की अच्छी परिभाषा है :

चौड़ाई मेट्रिक्स जैसे कुछ मान, उन इकाइयों में व्यक्त किए जाते हैं जो एक सार वर्ग के सापेक्ष होते हैं जिनकी ऊँचाई एक ही प्रकार के आकार में लाइनों के बीच की इच्छित दूरी होती है

डिफ़ॉल्ट बेसलाइन em वर्ग में 0 पर है । लाइन-ऊंचाई की गणना और संरेखण प्रयोजनों के लिए दो प्रपंच आरोही और वंश सबसे अधिक महत्व रखते हैं।

एसेंट बेसलाइन से आपके सबसे बड़े ग्लिफ़ के उच्चतम बिंदु तक अधिकतम दूरी है। आमतौर पर यह 1em है, इसलिए आपने यूनिट-प्रति-एम के लिए जो मूल्य दिया है।

वंश अपने आधार के किसी भी ग्लिफ़ में बेसलाइन से सबसे कम बिंदु तक अधिकतम दूरी है।

यहां ग्लिफ़ के साथ एक फ़ॉन्ट है जो सबसे कम और उच्चतम बिंदु पर और साथ ही बेसलाइन पर एक पंक्ति प्रदान करता है।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000"
               descent="500"
               ascent="1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode = "a" d = "M0 900h1000v100h-1000z" />
    <glyph unicode = "b" d = "M0 0h1000v100h-1000z" />
    <glyph unicode = "c" d = "M0 -500h1000v100h-1000z" />
  </font>
</svg>

चढ़ाई और वंश का उपयोग रेखा-ऊंचाई निर्धारित करने के लिए किया जाता है। यूनिट-प्रति-एम और बेसलाइन का उपयोग अन्य फोंट के सापेक्ष स्थिति और आकार को निर्धारित करने के लिए किया जाता है।