CSS @font-face Rule
Introduction to CSS @font-face Rule
सभी devices जैसे की personal computer, laptop और mobile आदि में कुछ fixed fonts पहले से stored रहते है। इन्हें web safe fonts कहा जाता है। यह एक global standard है जिसके तह्त सभी devices को इन fonts को store करके रखना होता है।
जब users अपने device के through किसी website को देखते है तो इन्हीं fonts में से कुछ fonts को use करते हुए उस website का content उनको show होता है। यदि website के लिए web safe fonts के अलावा कोई दूसरा font face (font family) use किया गया है तो वह उनको show नहीं होगा क्योंकि वह font face उनके devices पर installed नहीं है।
यही reason है की web designers websites को design करते समय web safe fonts का ही अधिक प्रयोग करते है। लेकिन इससे designers bound हो जाते है और website का design भी fixed हो जाता है क्योंकि designers web safe fonts के अलावा दूसरे fonts को use नहीं कर सकते है।
इस problem के solution के रूप में CSS3 में एक बहुत ही useful @ rule introduce किया गया है। यह rule @font-face के नाम से जाना जाता है।
CSS @font-face rule के द्वारा आप किसी भी font को अपने webpage में use कर सकते है और इसके लिए उस font का user के device पर installed होना आवश्यक भी नहीं है। यह rule designer को webpages में custom fonts use करने की ability provide करता है।
इस rule के माध्यम से जिस भी font को आप use करना चाहते है सबसे पहले उसका नाम define करते है और उसके बाद उस location को define करते है जँहा वह font stored है। यह location मुख्यतः किसी server पर होती है ताकि सभी को webpage उसी font में show हो सके।
आप चाहे तो किसी particular device में font को store करके वह location भी pass कर सकते है लेकिन ऐसा करने से वह font सिर्फ उसी device पर show होगा।
आप जिस भी location पर font को store करते है Web page load होते समय वह font location से fetch करके webpage को display करने में प्रयोग किया जाता है।
लेकिन एक बात आपको ध्यान रखनी चाहिए की जब तक आप font-family property द्वारा उस font को webpage के लिए define नहीं करेंगे वह font आपके web page में show नहीं होगा। CSS @font-face rule सिर्फ webpage को उस font से link करता है। इसके बाद जिस प्रकार आप normally अलग अलग fonts को define करने के लिए font-family property use करते है उसी प्रकार अपने custom font को भी आपको इस property द्वारा webpage में define करना होगा।
यह rule सभी modern browsers द्वारा support किया जाता है इसलिए आप इसे बिना किसी रुकावट के अपनी web applications के लिए use कर सकते है।
Syntax of CSS @font-face Rule
निचे @font-face rule का general syntax दिया जा रहा है।
@font-face
{
font-family : "name-of-font";
src : "location-of-font";
----more properties----
}
जैसा की आप ऊपर दिए syntax में देख सकते है custom font के बारे में जानकारी प्रदान करने के लिए कुछ properties use की जाती है। इन्हें font descriptors कहा जाता है। इस rule के साथ निचे दिए गए font descriptors use किये जा सकते है।
font-family
इस property द्वारा आप custom font का नाम define करते है।
src
इस property द्वारा वह location define की जाती है जँहा पर font stored है। Location define करने के लिए URL function का प्रयोग किया जाता है।
font-stretch
यह property optionally define की जाती है। इस property द्वारा आप define करते है की font किस प्रकार stretch होगा। इस property की कुछ common values normal, condensed और expanded आदि होती है।
font-style
यह property optionally define की जाती है। इस property द्वारा font की style define की जाती है। इस property की values normal, italic और oblique होती है।
font-weight
यह property optionally define की जाती है। इस property द्वारा font की boldness define की जाती है। इस property की कुछ common values bold, bolder और boldest आदि होती है।
unicode-range
यह property optionally define की जाती है। इस property द्वारा उन unicode characters को define किया जाता है जिन्हें font support करता है।
format
यह एक function होता है जो font format define करने के लिए प्रयोग किया जाता है। सभी modern browsers के लिए WOFF (Web Open Font Format) format प्रयोग किया जाता है। Internet Explorer के पुराने versions में TTF (TrueType Font) और OTF (OpenType Font) formats use किये जाते है।
Example of CSS @font-face Rule
निचे CSS @font-face rule को उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS @font-face Demo</title>
<style>
@font-face
{
font-family : Roboto;
src : url('roboto.woff') format('woff');
}
h1
{
font-family : 'Roboto', sans-serif;
font-size : 30px;
}
</style>
</head>
<body>
<h1>Best Hindi Tutorials</h1>
<p>Computer Science & IT Tutorials in Hindi</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
