शुरुआती जानकारी
CSS3 की @font-face सुविधा, हमें वेब पर कस्टम टाइपफ़ेस का इस्तेमाल आसान और बेहतर तरीके से करने में मदद करती है. हालांकि, ऐसा हो सकता है कि आप यह कहें, "अगर हमारे पास Cufon, sIFR का इस्तेमाल होता है, और इमेज में टेक्स्ट का इस्तेमाल करना है, तो @font-face का इस्तेमाल क्यों करना चाहिए?" पसंद के मुताबिक फ़ॉन्ट बनाने के लिए @font-face इस्तेमाल करने के कुछ फ़ायदे:
- ढूंढें (
ctrl-F) की मदद से, खोजे जाने की पूरी जानकारी - स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी का ऐक्सेस
- ब्राउज़र में मौजूद अनुवाद या अनुवाद सेवाओं की मदद से, टेक्स्ट का अनुवाद किया जा सकता है
- सीएसएस के पास टाइपोग्राफ़िक डिसप्ले में बदलाव करने की पूरी सुविधा है:
line-height,letter-spacing,text-shadow,text-align, और::first-letterऔर::first-lineजैसे सिलेक्टर
@फ़ॉन्ट-फ़ेस का मतलब
सबसे बुनियादी जानकारी के हिसाब से, हम नए कस्टम रिमोट फ़ॉन्ट का इस्तेमाल इस तरह से करने का एलान करते हैं:
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
इसके बाद, उसे इस्तेमाल के लिए डालें:
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
@font-face के इस एलान में, हम खास तौर पर फ़ॉन्ट को नाम देने के लिए, font-family प्रॉपर्टी का इस्तेमाल कर रहे हैं. फ़ॉन्ट कुछ भी हो सकता है, भले ही फ़ॉन्ट को क्या कहा जाता है. font-family: 'SuperDuperComicSans'; ठीक से काम करेगा. हालांकि, शायद आपकी छवि सही न हो. src प्रॉपर्टी में, हम ब्राउज़र को फ़ॉन्ट एसेट कहां से मिल सकते हैं, वहां ले जाते हैं. ब्राउज़र के आधार पर, कुछ मान्य फ़ॉन्ट टाइप होते हैं जो eot, ttf, otf, svg या डेटा यूआरआई होते हैं, जो पूरे फ़ॉन्ट डेटा को इनलाइन एम्बेड करते हैं.
| otf और ttf | svg | woff | ईओटी | |
|---|---|---|---|---|
| IE | IE9 | IE9 | IE5 या उससे ज़्यादा | |
| Firefox | FF3.5 | FF3.5 | FF3.6 | |
| Chrome | Chrome 4 | Chrome 0.3 | Chrome 5 | |
| Safari | 3.1 | 3.1 | ||
| Opera | ऑपरा 10.00 | ऑपरा 9 | ||
| iOS | iOS 1 | |||
| Android | 2.2 |
बेशक, कुछ भी उतना आसान नहीं होता जितना इसे होना चाहिए. ऊपर दिए गए कोड की शुरुआती सीमा यह थी कि यह IE 6-8 में ईओटी नहीं दिखाता था. बुलेटप्रूफ़ @font-face सिंटैक्स ने इस समस्या को हल करने का तरीका बताया है. हालांकि, इसका एक मज़बूत वर्शन है.
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.eot'); /* IE 5-8 */
src: local('☺'), /* sneakily trick IE */
url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
url('tagesschrift.svg#font') format('svg'); /* iOS */
}
क्या अब भी सिर दर्द हो रहा है? अगर आपको इसे तुरंत शुरू करना है, तो फ़ॉन्ट गिलहरी जनरेटर की मदद लें. यह एक ऐसा टूल है जो आपके लिए पूरी प्रक्रिया को आसान बना देता है. इसमें आपका फ़ॉन्ट लेकर, उसके वैरिएंट और सीएसएस को तैयार किया जाता है. आज के समय में वेबफ़ॉन्ट का इस्तेमाल करना बहुत ज़रूरी है.
मोबाइल सहायता?
मोबाइल Safari, iOS 3.1 और Android 3.1 तक SVG वेबफ़ॉन्ट का इस्तेमाल करता है और Android, 2.2 वर्शन तक otf/ttf पर काम करता है. क्या आपके मोबाइल उपयोगकर्ताओं को टाइपोग्राफ़िक बेहतर सुविधा मिलनी चाहिए? हमारा सुझाव है कि नहीं. इसकी मुख्य वजह यह है कि WebKit उस टेक्स्ट को कैसे हैंडल करता है जिसमें @font-face से, कस्टम फ़ॉन्ट का इंतज़ार होता है: टेक्स्ट दिख नहीं रहा. इसलिए, कम बैंडविथ वाले मोबाइल कनेक्शन पर, आपके उपयोगकर्ताओं को कोई भी टेक्स्ट तब तक नहीं दिखेगा, जब तक कि ~50 हज़ार फ़ॉन्ट डेटा लोड नहीं हो जाता. Webkit टीम, फ़ॉलबैक फ़ॉन्ट को कुछ सेकंड के बाद चालू करने के लिए काम कर रही है. हालांकि, जब तक यह सुविधा पूरी नहीं हो जाती, तब तक आपके उपयोगकर्ताओं को कॉन्टेंट और उनके बीच इस तरह की रुकावटों का सामना करना सही नहीं लगेगा.
वेबफ़ॉन्ट सेवाएं
कई सेवाएं @font-face सुविधा को एक आसान API के रूप में रैप करती हैं, कई बार आपको अपने HTML और कुछ कॉन्फ़िगरेशन में एक CSS या स्क्रिप्ट लाइन जोड़ने की सुविधा देती है और आपका काम पूरा हो जाता है. WebInk, Typekit, और Fontslive जैसे ऐप्लिकेशन से, आपको हर महीने शुल्क देकर फ़ॉन्ट इस्तेमाल करने की सुविधा मिलती है. फ़ॉन्ट का इस्तेमाल कभी-कभी बैंडविथ कैप तक किया जा सकता है. कैज़ुअल डेवलपर के लिए, इन सेवाओं का इस्तेमाल करना बहुत आसान है. इससे, उन्हें क्रॉस-ब्राउज़र समाधान उपलब्ध कराने में आने वाली कुछ मुश्किलों को भी हल करना आसान हो जाता है
Google Font API से, आपको बिना किसी शुल्क के लाइसेंस वाले फ़ॉन्ट के छोटे सेट का इस्तेमाल करने की सुविधा मिलती है. इसके लिए, आपको सिर्फ़ स्टाइलशीट से लिंक करके, क्रॉस-ब्राउज़र और परफ़ॉर्मेंस से जुड़ी समस्याओं को Google को मैनेज करने की अनुमति देनी होती है. यह ज़मीन से निकलने और वेबफ़ॉन्ट के साथ दौड़ने का सबसे तेज़ तरीका है.
@font-face के लिए पेशेवर टाइपफ़ेस ढूंढना
डिज़ाइनर के लिए एक आम हैरानी की बात यह है कि अगर आपने फ़ॉन्ट लाइसेंस खरीदा है (उदाहरण के लिए, ग्राफ़िक डिज़ाइन में इस्तेमाल करने के लिए), तो इसका मतलब यह नहीं है कि आप उसे @font-face में इस्तेमाल कर सकते हैं. @font-face (या वेब एम्बेडिंग) के लिए, आम तौर पर लाइसेंस अलग से बेचे जाते हैं. समझौते को ध्यान से पढ़ें. अगर आपका कोई सवाल है, तो फ़ॉन्ट फ़ाउंड्री से बेझिझक संपर्क करें. Fontspring एक फ़ॉन्ट बुटीक है. यहां सैकड़ों क्वालिटी के पेशेवर फ़ॉन्ट बेचे जाते हैं. इन सभी फ़ॉन्ट को @font-face पर इस्तेमाल किया जा सकता है. FontFont और अन्य फ़ाउंडर ने सीधे तौर पर @font-face के लाइसेंस बेचने शुरू कर दिए हैं. हालांकि, फ़िलहाल वे सिर्फ़ WOFF और EOT को टारगेट कर रहे हैं. ये ब्राउज़र मार्केट का एक बड़ा हिस्सा (लेकिन छोटा) छूट जाता है. कई फ़ाउंडर अपने कैटलॉग में वेबफ़ॉन्ट लाइसेंस जोड़ रहे हैं. अगर आपको अपने चुने हुए टाइपफ़ेस के लिए कोई लाइसेंस नहीं मिलता है, तो इस बारे में पूछने के लिए उनसे संपर्क करें.
FOUT से निपटना
फ़्लैश ऑफ़ अनस्टाइल टेक्स्ट, Firefox और Opera में एक आम घटना है. इसे कुछ ही वेब डिज़ाइनर पसंद करते हैं. @font-face के ज़रिए कस्टम टाइपफ़ेस लागू करने पर, पेज लोड होने में कुछ समय लगता है. इसमें फ़ॉन्ट अभी तक डाउनलोड और लागू नहीं हुआ है. साथ ही, font-family स्टैक में अगले फ़ॉन्ट का इस्तेमाल किया जाता है. इससे, अपग्रेड होने से पहले अलग (आम तौर पर कम अच्छा दिखने वाला) फ़ॉन्ट का फ़्लैश दिखता है.
Google Font API के साथ WebFont Loader एक JavaScript लाइब्रेरी है. इसका मकसद, कई इवेंट हुक उपलब्ध कराना है, ताकि आपको लोडिंग पर काफ़ी कंट्रोल मिल सके. आइए इस बारे में जानते हैं कि @font-face फ़ॉन्ट लोड होने के दौरान, WebKit के फ़ॉलबैक टेक्स्ट को छिपाने के लिए, दूसरे ब्राउज़र कैसे अपनाए जा सकते हैं.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['Tagesschrift'],
urls: ['http://paulirish.com/tagesschrift.css']
}
});
</script>
/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
visibility: visible;
font-family: 'Tagesschrift', 'Georgia', serif;
}
अगर JavaScript बंद है, तो पूरा टेक्स्ट दिखता रहेगा. साथ ही, अगर फ़ॉन्ट में कोई गड़बड़ी होती है, तो यह सुरक्षित तरीके से बेसिक सेरिफ़ पर वापस आ जाएगा. अभी के लिए इसे एक स्टॉप-गैप उपाय के रूप में देखें; ज़्यादातर वेबफ़ॉन्ट विशेषज्ञ 2-5 सेकंड के लिए फ़ॉलबैक टेक्स्ट को छिपाने और फिर इसे सामने लाने की इच्छा रखते हैं. इस टाइम आउट का ज़्यादा फ़ायदा कम बैंडविड्थ और मोबाइल डिवाइसों को मिलता है. ज़ाहिर है कि Mozilla जल्द ही इसे ठीक करने की कोशिश कर रहा है.
font-size-adjust प्रॉपर्टी, ज़्यादा हल्का, लेकिन कम असरदार है. फ़िलहाल, यह प्रॉपर्टी सिर्फ़ Firefox में काम करती है. इससे आपको फ़ॉन्ट स्टैक में x-height को सामान्य बनाने का मौका मिलता है. इससे FOUT में दिखने वाले बदलावों की संख्या कम हो जाती है. दरअसल, फ़ॉन्ट गिलहरी जनरेटर की सुविधा में एक सुविधा जोड़ी गई है, जो आपको अपलोड किए गए फ़ॉन्ट का x-ऊंचाई अनुपात बताती है, ताकि आप font-size-adjust की वैल्यू को सही तरीके से सेट कर सकें.
खास जानकारी
वेबfonts डिज़ाइन करने वालों को कुछ आज़ादी देता है. साथ ही, अलग से डिज़ाइन की गई लिगेचर और स्टाइल के विकल्प जैसी आने वाली सुविधाओं के साथ, उनमें अपने हिसाब से बदलाव किए जा सकते हैं. फ़िलहाल, CSS3 के इस हिस्से को आप भरोसे के साथ लागू कर सकते हैं, क्योंकि यह 98% डिप्लॉय किए गए ब्राउज़र को कवर करता है. आनंद लें!