नहीं दिखने वाले टेक्स्ट के फ़्लैश से बचना

केटी हैंपीनियस
केटी हेम्पेनियस
X

यह कोड लैब आपको फ़ॉन्ट फ़ेस ऑब्ज़र्वर का इस्तेमाल करके तुरंत टेक्स्ट दिखाने का तरीका बताता है.

फ़ॉन्ट फ़ेस ऑब्ज़र्वर जोड़ें

फ़ॉन्ट फ़ेस ऑब्ज़र्वर एक ऐसी स्क्रिप्ट है जो यह पता लगा लेती है कि कोई फ़ॉन्ट कब लोड होता है. fontfaceobserver.js फ़ाइल को पहले ही प्रोजेक्ट डायरेक्ट्री में सेव किया जा चुका है. इसलिए, आपको इसे अलग से जोड़ने की ज़रूरत नहीं है. हालांकि, आपको इसके लिए स्क्रिप्ट टैग जोड़ना होगा.

  • प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  • fontfaceobserver.js के लिए index.html में स्क्रिप्ट टैग जोड़ें:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

फ़ॉन्ट फ़ेस ऑब्ज़र्वर इस्तेमाल करें

ऑब्ज़र्वर बनाएं

हर उस फ़ॉन्ट फ़ैमिली के लिए एक ऑब्ज़र्वर बनाएं जिसका इस्तेमाल पेज पर किया गया है.

  • fontfaceobserver.js स्क्रिप्ट के बाद, यह स्क्रिप्ट जोड़ें. यह "पैसिफ़िको" और "रोबोटो" फ़ॉन्ट फ़ैमिली के लिए पर्यवेक्षक बनाता है:
  <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 और सेरिफ़, फ़ॉलबैक फ़ॉन्ट होते हैं. इसलिए, आपको उनके लिए FontFaceOverviewrs का एलान करने की ज़रूरत नहीं होगी.

फ़ॉन्ट लोड का पता लगाएं

फ़ॉन्ट लोड का पता लगाने के लिए कोड कुछ ऐसा दिखेगा:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() एक प्रॉमिस है जो फ़ॉन्ट लोड होने पर रिज़ॉल्व हो जाता है.

डेमो साइट में दो अलग-अलग फ़ॉन्ट इस्तेमाल किए गए हैं. इसलिए, दोनों फ़ॉन्ट के लोड होने तक आपको Promise.all() का इस्तेमाल करना होगा.

  • इस प्रॉमिस को FontFace पैसों के ठीक नीचे, अपनी स्क्रिप्ट में जोड़ें जिसका एलान आपने अभी-अभी किया है:
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;
}

पुष्टि करें

  • साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन दबाएं.

अगर पेज ऐसा दिखता है, तो इसका मतलब है कि आपने फ़ॉन्ट फ़ेस ऑब्ज़र्वर लागू कर लिया है और "न दिखने वाले टेक्स्ट की फ़्लैश" से छुटकारा पाया है.

कर्सिव फ़ॉन्ट में हेडिंग.