सीएसएस वेब फ़ॉन्ट्स
सीएसएस @ फॉन्ट-फेस नियम
वेब फोंट वेब डिज़ाइनरों को ऐसे फोंट का उपयोग करने की अनुमति देते हैं जो उपयोगकर्ता के कंप्यूटर पर स्थापित नहीं हैं।
जब आपको वह फ़ॉन्ट मिल गया/खरीदा गया जिसका आप उपयोग करना चाहते हैं, तो बस अपने वेब सर्वर पर फ़ॉन्ट फ़ाइल शामिल करें, और जरूरत पड़ने पर यह स्वचालित रूप से उपयोगकर्ता के लिए डाउनलोड हो जाएगा।
@font-faceआपके "स्वयं" फोंट सीएसएस नियम के भीतर परिभाषित हैं ।
विभिन्न फ़ॉन्ट प्रारूप
ट्रू टाइप फ़ॉन्ट्स (टीटीएफ)
ट्रू टाइप एक फ़ॉन्ट मानक है जिसे 1980 के दशक के अंत में Apple और Microsoft द्वारा विकसित किया गया था। ट्रू टाइप मैक ओएस और माइक्रोसॉफ्ट विंडोज ऑपरेटिंग सिस्टम दोनों के लिए सबसे आम फॉन्ट फॉर्मेट है।
ओपन टाइप फ़ॉन्ट्स (OTF)
ओपन टाइप स्केलेबल कंप्यूटर फोंट के लिए एक प्रारूप है। यह ट्रू टाइप पर बनाया गया था, और यह माइक्रोसॉफ्ट का एक पंजीकृत ट्रेडमार्क है। आज के समय में प्रमुख कंप्यूटर प्लेटफॉर्म पर ओपन टाइप फॉन्ट का उपयोग किया जाता है।
वेब ओपन फॉन्ट फॉर्मेट (WOFF)
WOFF वेब पेजों में उपयोग के लिए एक फ़ॉन्ट प्रारूप है। इसे 2009 में विकसित किया गया था, और अब यह W3C अनुशंसा है। WOFF अनिवार्य रूप से OpenType या TrueType संपीड़न और अतिरिक्त मेटाडेटा के साथ है। लक्ष्य बैंडविड्थ बाधाओं वाले नेटवर्क पर सर्वर से क्लाइंट को फ़ॉन्ट वितरण का समर्थन करना है।
वेब ओपन फॉन्ट फॉर्मेट (WOFF 2.0)
ट्रू टाइप/ओपन टाइप फ़ॉन्ट जो डब्ल्यूओएफएफ 1.0 से बेहतर संपीड़न प्रदान करता है।
एसवीजी फ़ॉन्ट्स / आकार
एसवीजी फोंट एसवीजी को टेक्स्ट प्रदर्शित करते समय ग्लिफ़ के रूप में उपयोग करने की अनुमति देते हैं। एसवीजी 1.1 विनिर्देश एक फ़ॉन्ट मॉड्यूल को परिभाषित करता है जो एक एसवीजी दस्तावेज़ के भीतर फोंट के निर्माण की अनुमति देता है। आप एसवीजी दस्तावेज़ों में भी सीएसएस लागू कर सकते हैं, और एसवीजी दस्तावेज़ों में टेक्स्ट पर @ फ़ॉन्ट-फेस नियम लागू किया जा सकता है।
एंबेडेड ओपन टाइप फ़ॉन्ट्स (ईओटी)
ईओटी फोंट माइक्रोसॉफ्ट द्वारा वेब पेजों पर एम्बेडेड फोंट के रूप में उपयोग के लिए डिज़ाइन किए गए ओपन टाइप फोंट का एक कॉम्पैक्ट रूप है।
फ़ॉन्ट स्वरूपों के लिए ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो फ़ॉन्ट प्रारूप का पूर्ण समर्थन करता है।
| Font format | |||||
|---|---|---|---|---|---|
| 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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*आईई: फ़ॉन्ट प्रारूप केवल तभी काम करता है जब "इंस्टॉल करने योग्य" पर सेट हो।
इच्छित फ़ॉन्ट का उपयोग करना
@font-faceनियम में ; पहले फ़ॉन्ट के लिए एक नाम परिभाषित करें (उदाहरण के लिए myFirstFont) और फिर फ़ॉन्ट फ़ाइल को इंगित करें।
युक्ति: फ़ॉन्ट URL के लिए हमेशा छोटे अक्षरों का उपयोग करें। आईई में अपरकेस अक्षर अप्रत्याशित परिणाम दे सकते हैं।
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एक ही फॉन्ट के लिए कई नियम हो सकते हैं।
सीएसएस फ़ॉन्ट डिस्क्रिप्टर
निम्न तालिका उन सभी फ़ॉन्ट डिस्क्रिप्टर को सूचीबद्ध करती है जिन्हें @font-faceनियम के अंदर परिभाषित किया जा सकता है:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |