यह कोड लैब आपको फ़ॉन्ट फ़ेस' का इस्तेमाल करके तुरंत टेक्स्ट दिखाने का तरीका बताता है ऑब्ज़र्वर.
फ़ॉन्ट फ़ेस ऑब्ज़र्वर जोड़ें
फ़ॉन्ट फ़ेस ऑब्ज़र्वर एक स्क्रिप्ट है
जो फ़ॉन्ट लोड होने का पता लगाता है. कॉन्टेंट बनाने
fontfaceobserver.js
फ़ाइल पहले से ही प्रोजेक्ट डायरेक्ट्री में सेव की जा चुकी है. इसलिए, आपको इसे जोड़ने की ज़रूरत नहीं है
अलग करना होगा. हालांकि, आपको इसके लिए एक स्क्रिप्ट टैग जोड़ना होगा.
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
fontfaceobserver.jsके लिएindex.htmlमें स्क्रिप्ट टैग जोड़ें:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
फ़ॉन्ट फ़ेस ऑब्ज़र्वर का इस्तेमाल करें
ऑब्ज़र्वर बनाएं
हर उस फ़ॉन्ट फ़ैमिली के लिए एक ऑब्ज़र्वर बनाएं जिसका इस्तेमाल पेज पर किया गया है.
fontfaceobserver.jsस्क्रिप्ट के बाद, यह स्क्रिप्ट जोड़ें. इससे कॉन्टेंट बनाने में "पैसिफ़िको" के लिए ऑब्ज़र्वर और "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') जोड़ना होगा. समय और सेरिफ़
फ़ॉलबैक फ़ॉन्ट के लिए तय की गई है, ताकि आपको उनके लिए FontFaceObservers का एलान न करना पड़े.
फ़ॉन्ट लोड का पता लगाएं
फ़ॉन्ट लोड का पता लगाने वाला कोड इस तरह दिखता है:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load() एक प्रॉमिस है, जो फ़ॉन्ट लोड होने पर ठीक होता है.
डेमो साइट में दो अलग-अलग फ़ॉन्ट का इस्तेमाल किया जाता है, इसलिए आपको Promise.all() का इस्तेमाल करना होगा
दोनों फ़ॉन्ट के लोड होने तक इंतज़ार करें.
- इस प्रॉमिस को अपनी स्क्रिप्ट में जोड़ें अभी-अभी एलान किया गया:
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");
इससे fonts-loaded क्लास दस्तावेज़ के रूट एलिमेंट में जुड़ जाती है (
<html> टैग) शामिल करें.
✔️चेक-इन करें
आपकी पूरी हो चुकी स्क्रिप्ट, कुछ इस तरह दिखेगी:
<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;
}
पुष्टि करें
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद,
फ़ुलस्क्रीन
.
अगर पेज ऐसा दिखता है, तो इसका मतलब है कि आपने फ़ॉन्ट फ़ेस अनलॉक की सुविधा चालू कर ली है ऑब्ज़र्वर और "नहीं दिखने वाले टेक्स्ट के फ़्लैश" से छुटकारा पाया.
