विज़ुअल तौर पर स्टेबल फ़ॉन्ट फ़ॉलबैक

जब वेब फ़ॉन्ट लोड होते हैं, तो वे अक्सर फ़ॉलबैक फ़ॉन्ट को बदल देते हैं. फ़ॉलबैक फ़ॉन्ट के डाइमेंशन अलग होते हैं, भले ही दोनों को एक ही font-size पर सेट किया गया हो. इसकी वजह से "लेआउट शिफ़्ट" (लेआउट शिफ़्ट होने में लगने वाला समय) होता है. साथ ही, अगर फ़ॉलबैक के लोअरकेस लेटर (x-हाइट), पसंदीदा फ़ॉन्ट से काफ़ी अलग हैं, तो टेक्स्ट को पढ़ना मुश्किल हो सकता है.

font-size-adjust प्रॉपर्टी, किसी खास मेट्रिक (आम तौर पर, x-हाइट) के आधार पर फ़ॉन्ट के साइज़ को सामान्य करके इस समस्या को हल करती है. इससे यह पक्का होता है कि टेक्स्ट, विज़ुअल स्पेस में एक जैसा दिखे, भले ही फ़िलहाल कोई भी फ़ॉन्ट चालू हो.

लागू करने के चरण

1. अपने पसंदीदा फ़ॉन्ट का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) पहचानना

फ़ॉलबैक को सामान्य बनाने के लिए, आपको अपने प्राइमरी फ़ॉन्ट की "ऐस्पेक्ट वैल्यू" (लोअरकेस अक्षरों और फ़ॉन्ट साइज़ का अनुपात) की ज़रूरत होती है.

• अपने-आप पता लगाना (सुझाया गया): from-font कीवर्ड का इस्तेमाल करें, ताकि ब्राउज़र आपके मुख्य वेब फ़ॉन्ट से अनुपात निकाल सके.
• मैन्युअल तरीके से कैलकुलेट करना: अगर आपको कोई खास वैल्यू पता है, तो उसे सीधे तौर पर दिया जा सकता है.जैसे, Verdana के लिए 0.545.इससे आपको ज़्यादा सटीक कंट्रोल मिलता है.

2. टेक्स्ट कंटेनर पर font-size-adjust लागू करें

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

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3. (ज़रूरी नहीं) चुनिंदा मेट्रिक के लिए अडजस्ट करना

हालांकि, x-height डिफ़ॉल्ट और सबसे सामान्य है, लेकिन इसे cap-height (सिर्फ़ बड़े अक्षरों में वाले हेडर के लिए काम का) या ch-width (मोनोस्पेस फ़ॉन्ट के लिए काम का) जैसी अन्य मेट्रिक के हिसाब से सामान्य किया जा सकता है.

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. विज़ुअल स्टैबिलिटी की पुष्टि करना

पक्का करें कि font-size-adjust वैल्यू, फ़ॉलबैक के साथ सही तरीके से अलाइन हो. इसकी जांच करने के लिए, वेब फ़ॉन्ट को कुछ समय के लिए ब्लॉक करें या अपने ब्राउज़र के DevTools में font-family डिक्लेरेशन में बदलाव करें. इसके बाद, पुष्टि करें कि टेक्स्ट का लेआउट पहले जैसा ही है.

फ़ॉलबैक रणनीतियां

font-size-adjust के साथ काम न करने वाले ब्राउज़र में, फ़ॉन्ट अपने डिफ़ॉल्ट स्केल पर रेंडर होगा. इसकी वजह से, फ़ॉन्ट स्वैप करने के दौरान लेआउट में बदलाव हो सकते हैं या टेक्स्ट को पढ़ने में समस्या आ सकती है.

font-size-adjust के बिना इस समस्या को कम करने के लिए, @font-face डिस्क्रिप्टर size-adjust, ascent-override, और descent-override का इस्तेमाल करके, फ़ॉलबैक फ़ॉन्ट को मैन्युअल तरीके से ट्यून किया जा सकता है. हालांकि, font-size-adjust की एक वैल्यू के मुकाबले, इन्हें कैलकुलेट करना ज़्यादा मुश्किल होता है.