इस कोड लैब में, Font Face Observer का इस्तेमाल करके, टेक्स्ट को तुरंत दिखाने का तरीका बताया गया है.
Font Face Observer जोड़ना
Font Face Observer एक स्क्रिप्ट है, जो फ़ॉन्ट लोड होने का पता लगाती है. fontfaceobserver.js फ़ाइल, प्रोजेक्ट डायरेक्ट्री में पहले से सेव है. इसलिए, आपको इसे अलग से जोड़ने की ज़रूरत नहीं है. हालांकि, इसके लिए आपको स्क्रिप्ट टैग जोड़ना होगा.
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
fontfaceobserver.jsके लिए स्क्रिप्ट टैग कोindex.htmlमें जोड़ें:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Font Face Observer का इस्तेमाल करना
ऑब्ज़र्वर बनाना
पेज पर इस्तेमाल किए गए हर फ़ॉन्ट फ़ैमिली के लिए, एक ऑब्ज़र्वर बनाएं.
fontfaceobserver.jsस्क्रिप्ट के बाद, यह स्क्रिप्ट जोड़ें. इससे "Pacifico" और "Roboto" फ़ॉन्ट फ़ैमिली के लिए ऑब्ज़र्वर बन जाते हैं:
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
अगर आपको कभी यह नहीं पता कि आपको कौनसे फ़ॉन्ट फ़ेस ऑब्ज़र्वर बनाने हैं, तो अपनी सीएसएस में font-family एलान देखें. इन एलान के font-family नाम को FontFaceObserver() पर पास करें. फ़ॉलबैक फ़ॉन्ट के लिए, फ़ॉन्ट ऑब्ज़र्वर बनाने की ज़रूरत नहीं है.
उदाहरण के लिए, अगर आपकी सीएसएस:
font-family: "Times New Roman", Times, serif;
आपको FontFaceObserver('Times New Roman') जोड़ना होगा. Times और serif, फ़ॉलबैक फ़ॉन्ट हैं. इसलिए, आपको उनके लिए FontFaceObservers का एलान करने की ज़रूरत नहीं होगी.
फ़ॉन्ट लोड होने का पता लगाना
फ़ॉन्ट लोड होने का पता लगाने वाला कोड ऐसा दिखता है:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load() एक प्रॉमिस है, जो फ़ॉन्ट लोड होने पर रिज़ॉल्व हो जाता है.
डेमो साइट में दो अलग-अलग फ़ॉन्ट का इस्तेमाल किया जाता है. इसलिए, आपको Promise.all() का इस्तेमाल करके, दोनों फ़ॉन्ट के लोड होने तक इंतज़ार करना होगा.
- अपनी स्क्रिप्ट में, अभी-अभी बताए गए FontFaceObservers के ठीक नीचे यह प्रॉमिस जोड़ें:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️चेक-इन करना
आपकी स्क्रिप्ट अब इस तरह दिखनी चाहिए:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
</script>
fonts-loaded क्लास लागू करना
- स्क्रिप्ट में
/* Do things */टिप्पणी को इस लाइन से बदलें:
document.documentElement.classList.add("fonts-loaded");
दोनों फ़ॉन्ट लोड होने के बाद, यह दस्तावेज़ के रूट एलिमेंट (<html> टैग) में fonts-loaded क्लास जोड़ता है.
✔️चेक-इन करना
आपकी पूरी स्क्रिप्ट कुछ इस तरह दिखनी चाहिए:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
document.documentElement.className += " fonts-loaded";
});
</script>
सीएसएस अपडेट करना
आपके पेज को इस तरह से स्टाइल किया जाना चाहिए कि शुरुआत में सिस्टम फ़ॉन्ट का इस्तेमाल किया जा सके और fonts-loaded क्लास लागू होने के बाद, पसंद के मुताबिक फ़ॉन्ट का इस्तेमाल किया जा सके.
- सीएसएस को अपडेट करें:
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
पुष्टि करें
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
अगर पेज ऐसा दिखता है, तो इसका मतलब है कि आपने Font Face Observer को लागू कर लिया है और "अनदेखे जा सकने वाले टेक्स्ट का फ़्लैश" हटा दिया है.
