हम @ फॉन्ट-फेस के साथ कूल फोंस को फास्ट करते हैं

हाल ही में मुझे मोबाइल वेब क्लाइंट के लिए एक असामान्य फ़ॉन्ट को खराब करने के कार्य का सामना करना पड़ा। चूंकि काम एक iPhone के लिए था, मैंने फैसला किया कि css 3 और @ फ़ॉन्ट-फेस जैसी चीज़ इस काम में मेरी मदद करेगी। हर कोई सोचता है कि समस्या को हल करने की इस पद्धति का लाभ यह है:

• पाठ खोज सहेज ली गई है क्योंकि यह पाठ है, चित्र नहीं;
• पाठ से जुड़े ऑनलाइन अनुवादक और विभिन्न चिप्स का उपयोग करने का अवसर है;
• कोई भी हमारे लिए लाइन-ऊंचाई, पत्र-रिक्ति, पाठ-छाया, पाठ-संरेखित, और चयनकर्ताओं के उपयोग के लिए रद्द नहीं करता है :: प्रथम-पत्र और :: प्रथम-पंक्ति

इसलिए, वांछित फ़ॉन्ट का उपयोग शुरू करने के लिए, स्टाइलशीट में निम्नलिखित प्रविष्टि बनाएं

@font-face {

font-family: 'Tagesschrift' ;

src: url( 'tagesschrift.ttf' );

}

और अब यह केवल नए फ़ॉन्ट के नाम को जोड़ने के लिए बनी हुई है

h1,h2,h3 { font-family: 'Tagesschrift' , 'Georgia' , serif; }



अब संक्षेप में हमने क्या किया है। फ़ॉन्ट-पारिवारिक संपत्ति इंगित करती है कि हमारे सिस्टम में नया फ़ॉन्ट कैसे कहा जाएगा। आप इसे अपनी पसंद की कोई भी चीज कह सकते हैं, मुख्य बात यह है कि बाद में आप याद रख सकते हैं कि आपका क्या मतलब है Src गुण फ़ॉन्ट के साथ फ़ाइल को इंगित करता है। निम्नलिखित फ़ॉन्ट प्रारूप समर्थित हैं: eot, ttf, otf, svg, woff।







जैसा कि आप देख सकते हैं, ब्राउज़रों की विविधता खुशी जोड़ती है, इसलिए उपरोक्त कोड को इस तरह से फिर से लिखना होगा:

@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 */

}

क्या यह मुश्किल है? निश्चित रूप से, इसलिए, लिंक का अनुसरण करते हुए हमने कुछ दिलचस्प टुकड़े पढ़े। और जीवन को सरल बनाने के लिए, हम इस सेवा का उपयोग करते हैं। हम इसमें फ़ॉन्ट लोड करते हैं और यह हमारे लिए सीएसएस उत्पन्न करता है।



अब मैं अपने प्यारे मोबाइल उपकरणों की ओर मुड़ता हूं। जैसा कि आप टेबल से देख सकते हैं, एंड्रॉइड और आईफोन पर सब कुछ किसी न किसी तरह से समर्थित है। लेकिन यहाँ समस्या निम्न कारण से उत्पन्न होती है। जबकि फ़ॉन्ट लोड हो रहा है, और यह 50k से अधिक है, सभी पाठ अदृश्य हो जाएंगे, इसलिए आपको मोबाइल वेब अनुप्रयोगों में फ़ॉन्ट के साथ सावधान रहना चाहिए।



यह सब प्रोग्रामिंग के साथ है और अब कई सेवाओं के बारे में कुछ शब्द हैं जो वेब पर फोंट के साथ काम करते समय उपयोगी हो सकते हैं।



सबसे पहले, फॉन्ट प्रीव्यूअर Google की एक सेवा है, जो आपको तुरंत यह देखने की अनुमति देता है कि कोई विशेष फ़ॉन्ट कैसा दिखेगा और तैयार सीएसएस शैली प्राप्त करेगा।

और अभी तक एक और Google विकास के बिना - Google फ़ॉन्ट API , एक एपीआई जो आपको किसी भी विकास में किसी भी फ़ॉन्ट को जोड़ने की अनुमति देता है।



Google फॉन्ट एपीआई के साथ सादृश्य द्वारा, कई सेवाएँ हैं - WebInk , Typekit और Fontslive । उनका अंतर यह है कि उन्हें भुगतान किया जाता है।



एक पोस्ट-स्क्रिप्ट के रूप में, मैं सभी को FOUT समस्या का उल्लेख करूंगा । संक्षेप में, इसमें निम्न शामिल हैं - जब फ़ॉन्ट-पारिवारिक संपत्ति में कई फ़ॉन्ट निर्दिष्ट करते हैं, तो एक समस्या हो सकती है कि निर्दिष्ट लोगों से दूसरा फ़ॉन्ट लागू किया जाता है जबकि पहला अभी भी लोड हो रहा है। यह समस्या फ़ायरफ़ॉक्स और ओपेरा में दिखाई देती है। यदि आप इसका सामना करते हैं, तो आपको फिर से Google और इसके js लाइब्रेरी वेबफॉन्ट लोडर की ओर मुड़ना चाहिए। नीचे इस स्क्रिप्ट के साथ काम करने का एक उदाहरण है

< 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 >



और फिर शैली

.wf-loading h2 {

visibility: hidden;

}

.wf-active h2, .wf-inactive h2 {

visibility: visible;

font-family: 'Tagesschrift' , 'Georgia' , serif;

}