CSS वेब फ़ॉन्ट

CSS @font-face नियम

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

जब आप इस्तेमाल करना चाहते हैं का फ़ॉन्ट पाते/खरीदते हैं, तो फ़ॉन्ट फ़ाइल को आपके वेब सर्वर पर शामिल करें, तो जब ज़रूरत होगी तो यह उपयोगकर्ता को स्वचालित रूप से डाउनलोड कर दिया जाएगा。

आपके “स्वत:” फ़ॉन्ट CSS में @font-face नियमों में परिभाषित किया जाता है।

विभिन्न फ़ॉन्ट फ़ॉर्मेट

TrueType फ़ॉन्ट (TTF)

TrueType 1980 के दशक के अंत में Apple और Microsoft द्वारा विकसित किया गया फ़ॉन्ट मानक है। TrueType Mac OS और Microsoft Windows ऑपरेटिंग सिस्टम का सबसे आम फ़ॉन्ट फ़ॉर्मेट है。

OpenType फ़ॉन्ट (OTF)

OpenType एक स्केलेबल कंप्यूटर फ़ॉन्ट फ़ॉर्मेट है। यह TrueType पर आधारित है और Microsoft का रजिस्टर्ड ट्रेडमार्क है। आज, OpenType फ़ॉन्ट अधिकांश कंप्यूटर प्लैटफॉर्मों में सामान्यता से इस्तेमाल किए जाते हैं。

वेब ओपन फ़ॉन्ट फ़ॉर्मेट (WOFF)

WOFF वेब के लिए फ़ॉन्ट फ़ॉर्मेट है। इसे 2009 में विकसित किया गया था और अब यह W3C की सिफ़ारिशित मानक बन गया है। WOFF असल में कम्प्रेशन और अन्य मेटाडाटा वाला OpenType या TrueType है। उद्देश्य बैंडविड्थ सीमित नेटवर्क पर सर्वर से क्लायंट तक फ़ॉन्ट वितरण को सहारा देना है。

वेब ओपन फ़ॉन्ट फ़ॉर्मेट (WOFF 2.0)

TrueType/OpenType फ़ॉन्ट WOFF 1.0 से बेहतर कम्प्रेशन प्रदान करते हैं。

SVG फ़ॉन्ट/आकार

SVG फ़ॉन्ट द्वारा प्रदर्शित टेक्स्ट में SVG को चरित्र के रूप में इस्तेमाल किया जाता है। SVG 1.1 नियमन में एक फ़ॉन्ट मॉड्यूल को परिभाषित किया गया है जो SVG दस्तावेज़ में फ़ॉन्ट को बनाने की अनुमति देता है। आपको भी SVG दस्तावेज़ पर CSS लागू कर सकते हैं और @font-face नियम को SVG दस्तावेज़ के टेक्स्ट पर लागू किया जा सकता है。

एम्बेडेड ओपेनटाइप फ़ॉन्ट (EOT)

EOT फ़ॉन्ट Microsoft द्वारा डिजाइन किए गए OpenType फ़ॉन्ट के संकुचित रूप है, जो वेब पृष्ठ पर एम्बेडेड फ़ॉन्ट के रूप में उपयोग किया जाता है।

फ़ॉन्ट फ़ॉर्मेट के ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस फ़ॉन्ट फ़ॉर्मेट के पूर्णतः समर्थित पहले ब्राउज़र संस्करण को निर्देशित करते हैं。

फ़ॉन्ट फ़ॉर्मेट
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG समर्थित नहीं है समर्थित नहीं है समर्थित नहीं है 3.2 समर्थित नहीं है
EOT 6.0 समर्थित नहीं है समर्थित नहीं है समर्थित नहीं है समर्थित नहीं है

*IE:यह फ़ॉन्ट फ़ॉर्मेट "installable" सेट किया गया होने पर ही प्रभावी है。

*Firefox:डिफ़ॉल्ट में समर्थित नहीं है, लेकिन सक्षम किया जा सकता है (WOFF2 का उपयोग करने के लिए प्रतीक को "true" करना आवश्यक है)。

आपके लिए फ़ॉन्ट का उपयोग करें

अटीका-फ़ैस शास्त्र में: पहले फ़ॉन्ट का नाम (उदाहरण में myFirstFont) परिभाषित करें, फिर उस फ़ॉन्ट फ़ाइल के लिए संदर्भ दें।

सूचना:फ़ॉन्ट URL हमेशा छोटे अक्षरों का उपयोग करें।बड़े अक्षरों का उपयोग करने से IE में अपवादी परिणाम हो सकते हैं。

यदि आप फ़ॉन्ट को HTML एलीमेंट के लिए उपयोग करना चाहते हैं, तो फ़ॉन्ट नाम (myFirstFont) को font-family गुण के द्वारा उपस्थित करें:

उदाहरण

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div {
  font-family: myFirstFont;
}

अपने आप साबित करें

बोल्ड टेक्स्ट का उपयोग करें

आपको एक अन्य @font-face शास्त्र जोड़ना होगा जिसमें बोल्ड टेक्स्ट के वर्णनकर्ता है:

उदाहरण

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

अपने आप साबित करें

फ़ाइल "sansation_bold.woff" एक अन्य फ़ॉन्ट फ़ाइल है जिसमें Sansation फ़ॉन्ट के बोल्ड चरित्र हैं。

जब "myFirstFont" फ़ॉन्ट परिवार का एक शब्द-टैक्स्ट बोल्ड होना चाहते हैं तो, ब्राउज़र इसे उपयोग करेगा。

इस प्रकार, आप एक ही फ़ॉन्ट के लिए कई @font-face शास्त्र।

CSS फ़ॉन्ट वर्णन

नीचे दिए गए तालिका में जहां तक कि यह उपलब्ध है @font-face शास्त्र के भीतर परिभाषित सभी फ़ॉन्ट वर्णनकर्ता (font descriptor):

वर्णनकर्ता मूल्य वर्णन
font-family name आवश्यक है।फ़ॉन्ट नाम को परिभाषित करें。
src URL आवश्यक है।फ़ॉन्ट फ़ाइल के URL को परिभाषित करें。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 वैकल्पिक।फ़ॉन्ट को कैसे फैलाया जाना है इसे परिभाषित करता है।मूलभूत मूल्य "normal" है।
font-style
  • normal
  • italic
  • oblique
 वैकल्पिक।फ़ॉन्ट की शैली को परिभाषित करता है।मूलभूत मूल्य "normal" है।
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 वैकल्पिक।फ़ॉन्ट की लघुत्व को परिभाषित करता है।मूलभूत मूल्य "normal" है।
unicode-range unicode-range वैकल्पिक।फ़ॉन्ट के समर्थित यूनिकोड चार्ज रेंज को परिभाषित करता है।मूलभूत मूल्य "U+0-10FFFF" है।