बेहतर फ़ॉन्ट फ़ॉलबैक

Katie Hempenius

खास जानकारी

इस लेख में फ़ॉन्ट फ़ॉलबैक और size-adjust, ascent-override, descent-override, और line-gap-override एपीआई के बारे में ज़्यादा जानकारी दी गई है. इन एपीआई की मदद से, ऐसे स्थानीय फ़ॉन्ट का इस्तेमाल किया जा सकता है जिनसे फ़ॉलबैक फ़ॉन्ट के फ़ेस बनाए जा सकते हैं. ये फ़ॉन्ट, वेब फ़ॉन्ट के डाइमेंशन से काफ़ी मिलते-जुलते होते हैं या पूरी तरह मेल खाते हैं. यह फ़ॉन्ट बदलने की वजह से होने वाले लेआउट शिफ़्ट को कम करता है या खत्म कर देता है.

अगर आपको इस लेख को अभी नहीं पढ़ना है, तो यहां कुछ ऐसे टूल दिए गए हैं जिनका इस्तेमाल करके, इन एपीआई का तुरंत इस्तेमाल शुरू किया जा सकता है:

फ़्रेमवर्क टूल:

• @next/font: अगले 13 साल से, next/font मिलते-जुलते फ़ॉन्ट फ़ॉलबैक उपलब्ध कराने के लिए, अपने-आप फ़ॉन्ट मेट्रिक ओवरराइड और size-adjust का इस्तेमाल करता है.
• @numtjs/fontaine: Nuxt 3 से, nuxt/fontaine का इस्तेमाल किया जा सकता है. इसकी मदद से, आपके Nuxt ऐप्लिकेशन में इस्तेमाल की जाने वाली स्टाइलशीट में, मिलते-जुलते फ़ॉन्ट फ़ॉलबैक अपने-आप जनरेट और डाले जा सकते हैं.

बिना फ़्रेमवर्क वाले टूल:

• फ़ॉन्टेन: फ़ॉन्टेन एक लाइब्रेरी है, जो अपने-आप ऐसे फ़ॉन्ट फ़ॉलबैक जनरेट करती और शामिल करती है जो फ़ॉन्ट मेट्रिक ओवरराइड का इस्तेमाल करते हैं.
• इस रेपो में, Google Fonts से होस्ट किए गए सभी फ़ॉन्ट के लिए फ़ॉन्ट मेट्रिक ओवरराइड शामिल हैं. इन वैल्यू को कॉपी करके आपकी स्टाइलशीट में चिपकाया जा सकता है.

बैकग्राउंड

फ़ॉलबैक फ़ॉन्ट, ऐसा फ़ॉन्ट फ़ेस होता है जिसका इस्तेमाल तब किया जाता है, जब मुख्य फ़ॉन्ट फ़ेस अभी तक लोड नहीं हुआ है या पेज के कॉन्टेंट को रेंडर करने के लिए ज़रूरी ग्लिफ़ मौजूद नहीं है. उदाहरण के लिए, नीचे दी गई सीएसएस बताती है कि sans-serif फ़ॉन्ट फ़ैमिली का इस्तेमाल, "Roboto" के लिए फ़ॉन्ट फ़ॉलबैक के तौर पर किया जाना चाहिए.

font-family: "Roboto" , sans-serif;

फ़ॉलबैक फ़ॉन्ट का इस्तेमाल, टेक्स्ट को ज़्यादा तेज़ी से रेंडर करने के लिए किया जा सकता है. इसका मतलब है कि font-display: swap का इस्तेमाल करके. इस वजह से, पेज का कॉन्टेंट जल्दी पढ़ा जा सकता है और उपयोगी हो जाता है. हालांकि, पुराने तौर पर इसका असर लेआउट को बार-बार बदलना पड़ता है: आम तौर पर, लेआउट शिफ़्ट तब होते हैं, जब वेब फ़ॉन्ट की जगह फ़ॉलबैक फ़ॉन्ट को बदल दिया जाता है. हालांकि, नीचे बताए गए नए एपीआई इस समस्या को कम कर सकते हैं या खत्म कर सकते हैं. ऐसा करने से, ऐसे फ़ॉलबैक फ़ॉन्ट फ़ेस बनाए जा सकते हैं जो वेब फ़ॉन्ट वाले मिलते-जुलते हिस्से का इस्तेमाल करते हैं.

बेहतर फ़ॉन्ट फ़ॉलबैक

"बेहतर" फ़ॉन्ट फ़ॉलबैक जनरेट करने के दो तरीके हैं. सबसे आसान तरीका, एपीआई को ओवरराइड करने के लिए सिर्फ़ फ़ॉन्ट मेट्रिक का इस्तेमाल करता है. ज़्यादा मुश्किल (लेकिन ज़्यादा असरदार) तरीका, एपीआई और size-adjust, दोनों को ओवरराइड करने के लिए फ़ॉन्ट मेट्रिक का इस्तेमाल करता है. इस लेख में, इन दोनों तरीकों के बारे में बताया गया है.

फ़ॉन्ट मेट्रिक को बदलने की सुविधा कैसे काम करती है

शुरुआती जानकारी

फ़ॉन्ट मेट्रिक को बदलने की सुविधा से, फ़ॉन्ट के ऊपर, नीचे, और लाइन-गैप की सेटिंग को बदला जा सकता है:

• ऐसेंट की मदद से, बेसलाइन के किसी फ़ॉन्ट के ग्लिफ़ का इस्तेमाल करके तय की गई दूरी को मापा जाता है.
• डिसेंट की मदद से, बेसलाइन के नीचे किसी फ़ॉन्ट के ग्लिफ़ का इस्तेमाल करके तय की गई दूरी को मापा जाता है.
• लाइन गैप को "लीडिंग" भी कहा जाता है. यह टेक्स्ट की लगातार आने वाली लाइनों के बीच की दूरी को मापता है.

फ़ॉन्ट मेट्रिक ओवरराइड का इस्तेमाल, फ़ॉलबैक फ़ॉन्ट के चढ़ाई, नीचे, और लाइन-गैप को बदलने के लिए किया जा सकता है, ताकि वेब फ़ॉन्ट के बढ़ते, नीचे, और लाइन-गैप से मैच किया जा सके. इस वजह से, वेब फ़ॉन्ट और अडजस्ट किए गए फ़ॉलबैक फ़ॉन्ट का वर्टिकल डाइमेंशन हमेशा एक जैसा होगा.

फ़ॉन्ट मेट्रिक के बदलावों का इस्तेमाल इस तरह की स्टाइलशीट में किया जाता है:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

इस लेख की शुरुआत में दिए गए टूल, सही फ़ॉन्ट मेट्रिक ओवरराइड वैल्यू जनरेट कर सकते हैं. हालांकि, इन वैल्यू का हिसाब खुद भी लगाया जा सकता है.

फ़ॉन्ट मेट्रिक के बदलावों को कैलकुलेट किया जा रहा है

नीचे दिए गए समीकरणों से पता चलता है कि दिए गए वेब फ़ॉन्ट के लिए फ़ॉन्ट मेट्रिक बदल गई है. फ़ॉन्ट मेट्रिक की वैल्यू में बदलाव करने की वैल्यू, दशमलव के बजाय प्रतिशत (उदाहरण के लिए, 105%) के तौर पर लिखी जानी चाहिए.

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

ध्यान दें: हर इकाई के हिसाब से इकाई (यूपीएम), ग्रिड के उस साइज़ को दिखाती है जिसका इस्तेमाल फ़ॉन्ट डिज़ाइन करते समय किया गया था. हालांकि, अन्य ग्रिड साइज़ हैं, लेकिन 1000 (1000x1000 ग्रिड) या 2048 (2048x2048 ग्रिड) सबसे लोकप्रिय हैं. अन्य मेट्रिक का डेटा देखने के लिए, यूपीएम के बारे में जानना ज़रूरी है. उदाहरण के लिए, 900 के बढ़ने का मतलब अलग-अलग है. यह इस बात पर निर्भर करता है कि फ़ॉन्ट का यूपीएम 1000 है या 2048.

उदाहरण के लिए, POPpins फ़ॉन्ट के लिए फ़ॉन्ट मेट्रिक यहां बदली गई हैं:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

ascent, descent, line-gap, और unitsPerEm की वैल्यू, वेब फ़ॉन्ट के मेटाडेटा से मिलती हैं. इस लेख के अगले सेक्शन में, इन वैल्यू को पाने का तरीका बताया गया है.

फ़ॉन्ट टेबल पढ़ी जा रही हैं

किसी फ़ॉन्ट के मेटाडेटा (खास तौर पर, इसकी फ़ॉन्ट टेबल) में वह सारी जानकारी मौजूद होती है जिसकी ज़रूरत आपको फ़ॉन्ट मेट्रिक के ओवरराइड की गिनती करने के लिए होती है.

फ़ॉन्ट मेटाडेटा देखने के लिए FontForge का इस्तेमाल करना

यहां कुछ टूल दिए गए हैं जिनका इस्तेमाल फ़ॉन्ट के मेटाडेटा को पढ़ने के लिए किया जा सकता है:

• fontkit Node.js के लिए बनाया गया फ़ॉन्ट इंजन है. यह कोड स्निपेट, फ़ॉन्ट मेट्रिक ओवरराइड का हिसाब लगाने के लिए fontkit इस्तेमाल करने का तरीका बताता है.
• Capsize, फ़ॉन्ट का साइज़ और लेआउट लाइब्रेरी है. Capsize, अलग-अलग फ़ॉन्ट मेट्रिक के बारे में जानकारी पाने के लिए, एक एपीआई उपलब्ध कराता है.
• fontdrop.info ऐसी वेबसाइट है जो आपको ब्राउज़र से फ़ॉन्ट टेबल और फ़ॉन्ट से जुड़ी दूसरी जानकारी देखने की सुविधा देती है.
• Font Forge एक लोकप्रिय डेस्कटॉप फ़ॉन्ट एडिटर है. ascent, descent, और line-gap को देखने के लिए: Font Info डायलॉग खोलें, OS/2 मेन्यू चुनें, फिर Metrics टैब चुनें. UPM को देखने के लिए: Font Info डायलॉग बॉक्स खोलें. इसके बाद, General मेन्यू चुनें.

ध्यान दें: फ़ॉन्ट से जुड़ी कुछ JavaScript लाइब्रेरी, कैनवस पर ग्लिफ़ बनाकर और नतीजों को मेज़र करके, ऊपर, नीचे जाने, और लाइन-गैप का अनुमान लगाती हैं. हालांकि, यह तरीका फ़ॉन्ट मेट्रिक को सीधे फ़ॉन्ट टेबल से पढ़ने के मुकाबले कम सटीक है.

फ़ॉन्ट टेबल को समझना

आपने देखा होगा कि "बढ़ोतरी" जैसे कॉन्सेप्ट को कई मेट्रिक से रेफ़र किया जाता है—उदाहरण के लिए, hheaAscent, typoAscent, और winAscent मेट्रिक हैं. यह फ़ॉन्ट रेंडरिंग के लिए अलग-अलग ऑपरेटिंग सिस्टम अपनाने की वजह से है: OSX डिवाइसों के प्रोग्राम आम तौर पर hhea* फ़ॉन्ट मेट्रिक का इस्तेमाल करते हैं—जबकि Windows डिवाइसों के प्रोग्राम आम तौर पर typo* (जिसे sTypo* भी कहा जाता है) या win* फ़ॉन्ट मेट्रिक का इस्तेमाल करते हैं.

ध्यान दें: खास तौर पर, Windows डिवाइसों के प्रोग्राम आम तौर पर typo* मेट्रिक का इस्तेमाल करते हैं. ऐसा तब होता है, जब किसी फ़ॉन्ट में USE_TYPO_METRICS सेट हो और अगर ऐसा नहीं है, तो win* मेट्रिक का इस्तेमाल किया जाता है. USE_TYPO_METRICS एक बूलियन पैरामीटर है. इसकी मदद से, डिज़ाइनर typo* और win* मेट्रिक का इस्तेमाल करने के बीच प्राथमिकता सेट कर सकते हैं.

फ़ॉन्ट, ब्राउज़र, और ऑपरेटिंग सिस्टम के हिसाब से, hhea, typo या win मेट्रिक का इस्तेमाल करके फ़ॉन्ट को रेंडर किया जाएगा.

	Mac	Windows
Chromium	इसमें "hhea" टेबल की मेट्रिक इस्तेमाल की जाती हैं.	अगर "USE_TYPO_METRICS" सेट है, तो "typo" टेबल की मेट्रिक का इस्तेमाल किया जाता है. अन्य मामलों में, "विन" टेबल की मेट्रिक का इस्तेमाल किया जाता है.
Firefox	अगर "USE_TYPO_METRICS" सेट है, तो "typo" टेबल की मेट्रिक का इस्तेमाल किया जाता है. अन्य मामलों में, "hhea" टेबल की मेट्रिक का इस्तेमाल किया जाता है.	अगर "USE_TYPO_METRICS" सेट है, तो "typo" टेबल की मेट्रिक का इस्तेमाल किया जाता है. अन्य मामलों में, "विन" टेबल की मेट्रिक का इस्तेमाल किया जाता है.
Safari	इसमें "hhea" टेबल की मेट्रिक इस्तेमाल की जाती हैं.	अगर "USE_TYPO_METRICS" सेट है, तो "typo" टेबल की मेट्रिक का इस्तेमाल किया जाता है. अन्य मामलों में, "विन" टेबल की मेट्रिक का इस्तेमाल किया जाता है.

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

क्रॉस-डिवाइस के काम करने की सुविधा

ज़्यादातर फ़ॉन्ट के लिए (उदाहरण के लिए, Google Fonts से होस्ट किए गए ~90% फ़ॉन्ट) उपयोगकर्ता के ऑपरेटिंग सिस्टम को जाने बिना, फ़ॉन्ट मेट्रिक में सुरक्षित तरीके से बदलाव किया जा सकता है: दूसरे शब्दों में, इन फ़ॉन्ट के लिए ascent-override, descent-override, और linegap-override की वैल्यू एक जैसी ही रहती है, चाहे hhea, typo या win मेट्रिक लागू हों या नहीं. इस रेपो से जानकारी मिलती है कि यह किन फ़ॉन्ट पर लागू होता है और किन पर लागू नहीं होता.

यदि आप ऐसे फ़ॉन्ट का उपयोग कर रहे हैं जिसके लिए OSX और Windows डिवाइस के लिए फ़ॉन्ट मेट्रिक ओवरराइड के अलग-अलग सेट का उपयोग करने की आवश्यकता है, तो फ़ॉन्ट मेट्रिक ओवरराइड का उपयोग करें और size-adjust का सुझाव केवल तभी दिया जाता है, जब आपके पास उपयोगकर्ता के ऑपरेटिंग सिस्टम के आधार पर अपनी स्टाइलशीट बदलने की क्षमता हो.

ध्यान दें: इस सेक्शन में यह पता लगाने का तरीका बताया गया है कि कोई फ़ॉन्ट, OSX और Windows डिवाइस, दोनों पर एक ही फ़ॉन्ट मेट्रिक को ओवरराइड करता है या नहीं. सबसे पहले, यह देख लें कि फ़ॉन्ट में USE_TYPO_METRICS चालू है या नहीं.

• अगर USE_TYPO_METRICS चालू है, तो OSX डिवाइसों पर hhea मेट्रिक और Windows डिवाइसों पर typo मेट्रिक का इस्तेमाल करके, फ़ॉन्ट को रेंडर किया जाएगा.
• OSX पर सामान्य रेखा की ऊंचाई की गणना करने के लिए, निम्न समीकरण का उपयोग करें: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Windows पर लाइन की सामान्य ऊंचाई कैलकुलेट करने के लिए, इस इक्वेशन का इस्तेमाल करें: (typoAscent + typoDescent + typoLineGap)/unitsPerEm.
• अगर OSX और Windows पर लाइन की ऊंचाई एक समान है, तो आप दोनों ऑपरेटिंग सिस्टम के लिए एक ही फ़ॉन्ट मेट्रिक ओवरराइड का इस्तेमाल कर सकते हैं.
• अगर USE_TYPO_METRICS चालू नहीं है, तो OSX डिवाइसों पर hhea मेट्रिक और Windows डिवाइसों पर win मेट्रिक का इस्तेमाल करके, फ़ॉन्ट को रेंडर किया जाएगा.
• OSX पर सामान्य रेखा की ऊंचाई की गणना करने के लिए, निम्न समीकरण का उपयोग करें: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Windows पर लाइन की सामान्य ऊंचाई कैलकुलेट करने के लिए, इस इक्वेशन का इस्तेमाल करें: (winAscent + winDescent)/unitsPerEm. (ध्यान दें: winLineGap जैसी कोई चीज़ नहीं है).
• अगर नीचे दी गई दोनों शर्तें सही हैं, तो OSX और Windows पर एक ही फ़ॉन्ट मेट्रिक ओवरराइड का इस्तेमाल किया जा सकता है: a) hheaLineGap == 0, b) OSX और Windows पर लाइन की ऊंचाई एक जैसी है.

फ़ॉन्ट मेट्रिक में बदलावों का इस्तेमाल करना

फ़ॉन्ट मेट्रिक ओवरराइड, वेब फ़ॉन्ट के मेटाडेटा से मिलने वाले मेज़रमेंट का इस्तेमाल करके कैलकुलेट किए जाते हैं, न कि फ़ॉलबैक फ़ॉन्ट के मेटाडेटा. इसलिए, फ़ॉलबैक फ़ॉन्ट के तौर पर चाहे किसी भी फ़ॉन्ट का इस्तेमाल किया गया हो, वे एक जैसे रहते हैं. उदाहरण के लिए:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

साइज़ अडजस्ट करने की सुविधा कैसे काम करती है

शुरुआती जानकारी

size-adjust सीएसएस डिस्क्रिप्टर, फ़ॉन्ट ग्लिफ़ की चौड़ाई और ऊंचाई को उसी अनुपात में स्केल करता है. उदाहरण के लिए, size-adjust: 200% फ़ॉन्ट ग्लिफ़ को उनके मूल साइज़ से दोगुना स्केल करता है; size-adjust: 50% फ़ॉन्ट ग्लिफ़ को उनके मूल साइज़ से आधा स्केल करता है.

size-adjust में फ़ॉन्ट फ़ॉलबैक को बेहतर बनाने के लिए सीमित ऐप्लिकेशन उपलब्ध हैं: ज़्यादातर मामलों में, किसी वेब फ़ॉन्ट से मिलान करने के लिए फ़ॉलबैक फ़ॉन्ट को थोड़ा छोटा या ज़्यादा चौड़ा (आनुपातिक रूप से करने के बजाय) करना होता है. हालांकि, size-adjust को फ़ॉन्ट मेट्रिक ओवरराइड के साथ इस्तेमाल करने से, किसी भी दो फ़ॉन्ट को हॉरिज़ॉन्टल और वर्टिकल, दोनों तरह से एक-दूसरे से मैच किया जा सकता है.

स्टाइलशीट में size-adjust का इस्तेमाल इस तरह किया जाता है:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

size-adjust को कैलकुलेट करने का तरीका (इसके बारे में अगले सेक्शन में बताया गया है) होने की वजह से, size-adjust की वैल्यू (और उससे जुड़ी फ़ॉन्ट मेट्रिक ओवरराइड) इस आधार पर बदलती है कि किस फ़ॉलबैक फ़ॉन्ट का इस्तेमाल किया गया है:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

ध्यान दें: फ़ॉन्ट मेट्रिक में किए गए बदलाव और size-adjust, दोनों का प्रतिशत, प्रतिशत का इस्तेमाल करके तय किया जाता है. हालांकि, इन प्रतिशत का मतलब अलग-अलग होता है: उदाहरण के लिए, size-adjust: 10% फ़ॉन्ट को उसके मूल साइज़ से 1/10 गुना बड़ा कर देता है. हालांकि, ascent-override: 10% फ़ॉन्ट के अनुपात को छोटा नहीं करता. यह फ़ॉन्ट के अनुपात को बदलता है, यानी कि फ़ॉन्ट का साइज़, यूपीएम के 10% के बराबर होगा

.

साइज़-अडजस्ट और फ़ॉन्ट मेट्रिक में बदलाव को कैलकुलेट किया जा रहा है

size-adjust और फ़ॉन्ट मेट्रिक के ओवरराइड का हिसाब लगाने के लिए, ये समीकरण हैं:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

इनमें से ज़्यादातर इनपुट (जैसे, बढ़ते क्रम, घटते और लाइन-गैप) को सीधे वेब फ़ॉन्ट के मेटाडेटा से पढ़ा जा सकता है. हालांकि, avgCharacterWidth अनुमानित होना चाहिए.

वर्णों की औसत चौड़ाई का अनुमान

आम तौर पर, वर्णों की औसत चौड़ाई का अनुमान ही लगाया जा सकता है. हालांकि, कुछ मामलों में इसका हिसाब सटीक तरीके से लगाया जा सकता है: उदाहरण के लिए, मोनोस्पेस फ़ॉन्ट इस्तेमाल करने पर या टेक्स्ट स्ट्रिंग के कॉन्टेंट के बारे में पहले से पता चल जाता है.

ध्यान दें: फ़ॉन्ट या तो मोनोस्पेस या तय-चौड़ाई वाला हो सकता है: मोनोस्पेस में इस्तेमाल होने वाले फ़ॉन्ट में, सभी वर्ण हॉरिज़ॉन्टल स्पेस का बराबर इस्तेमाल करते हैं. वहीं, तय चौड़ाई वाले फ़ॉन्ट में, वर्णों की चौड़ाई अलग-अलग होती है. आम तौर पर, मोनोस्पेस वाले फ़ॉन्ट का इस्तेमाल आईडीई में किया जाता है. हालांकि, वेब पर ये फ़ॉन्ट, फ़िक्स्ड-विथ वाले फ़ॉन्ट के मुकाबले कम इस्तेमाल होते हैं.

ध्यान दें: आसानी से समझने के लिए, इस लेख में ग्लिफ़ की "चौड़ाई" के बारे में बताया गया है. हालांकि, यह शब्दावली गलत नहीं है—"ऐडवांस", "ऐडवांस चौड़ाई" या "हॉरिज़ॉन्टल एडवांस", आम तौर पर टाइपोग्राफ़ी फ़ील्ड में इस्तेमाल होने वाली शब्दावली हैं.

avgCharacterWidth का हिसाब लगाने का एक आसान तरीका, सभी [a-z\s] वर्णों की औसत चौड़ाई लेना है.

रोबोटो ग्लिफ़ की चौड़ाई

हालांकि, सभी वर्णों को समान रूप से महत्व देने से, अक्सर इस्तेमाल किए जाने वाले अक्षरों की चौड़ाई (उदाहरण के लिए, e) से कम वज़न हो सकता है और कम इस्तेमाल होने वाले अक्षरों (उदाहरण के लिए, z) की चौड़ाई ज़्यादा वज़न हो सकती है.

वर्णों की फ़्रीक्वेंसी को ध्यान में रखना ज़्यादा जटिल तरीका है. इसके बजाय, [a-z\s] वर्णों की फ़्रीक्वेंसी के मुताबिक औसत चौड़ाई का हिसाब लगाएं. यह लेख, अंग्रेज़ी के अक्षरों की फ़्रीक्वेंसी और शब्दों की औसत लंबाई के लिए एक अच्छी जानकारी है.

अंग्रेज़ी में लेटर की फ़्रीक्वेंसी

ध्यान दें: इस लेख में, अंग्रेज़ी टेक्स्ट के साथ इस्तेमाल किए जाने वाले फ़ॉन्ट फ़ॉलबैक के लिए, avgCharacterWidth का हिसाब लगाने के तरीके के बारे में बताया गया है. हालांकि, यही सिद्धांत दूसरी भाषाओं और वर्ण सेट पर भी लागू किया जा सकता है. अगर अंग्रेज़ी में उपलब्ध कॉन्टेंट के अलावा, इस तकनीक को इस्तेमाल करने का आपका अनुभव शेयर किया जाए, तो हमें आपके अनुभव जानने में खुशी होगी.

ध्यान दें: avgCharacterWidth का अनुमान लगाने का एक और तरीका, xAvgCharWidth का इस्तेमाल करना है. xAvgCharWidth, पहले से भरी गई वैल्यू होती है, जो फ़ॉन्ट की OS/2 टेबल में मौजूद होती है. हालांकि, ध्यान रखें कि यह मेट्रिक हमेशा सही नहीं होती. उदाहरण के लिए, फ़ॉन्ट का सबसेट बनाने वाले कई टूल, xAvgCharWidth को अपडेट नहीं करते. ऐसा तब होता है, जब किसी फ़ॉन्ट में ग्लिफ़ जोड़ा जाता है या उससे हटाया जाता है. इसके अलावा, भले ही xAvgCharWidth का हिसाब सही तरीके से लगाया गया हो, लेकिन पिछले कुछ सालों में xAvgcharWidth का हिसाब लगाने का तरीका बदल रहा है: ओएस/2 टेबल के किस वर्शन का इस्तेमाल फ़ॉन्ट में किया गया है, इसके आधार पर xAvgCharWidth की वैल्यू अलग-अलग हो सकती है.

कोई तरीका चुनना

इस लेख में बताए गए दोनों तरीकों के अपने फ़ायदे और नुकसान हैं:

• अगर आपको फ़ॉन्ट फ़ॉलबैक ऑप्टिमाइज़ करने हैं, तो फ़ॉन्ट मेट्रिक ओवरराइड का इस्तेमाल करना एक अच्छा तरीका है. हालांकि, यह इन दोनों तरीकों में से सबसे आसान है. आम तौर पर, यह इतना ताकतवर है कि फ़ॉन्ट से जुड़े लेआउट में बदलाव के असर को कम किया जा सकता है.

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

ध्यान दें: ऐसा हो सकता है कि आप सोच रहे हों कि फ़ॉन्ट मेट्रिक ओवरराइड या size-adjust का इस्तेमाल करने के बजाय, किसी तय line-height को क्यों सेट नहीं किया जा सकता. हालांकि, कभी-कभी line-height का इस्तेमाल, फ़ॉन्ट से जुड़े लेआउट शिफ़्ट कम करने या हटाने के लिए किया जा सकता है. इसलिए, हम इस तरीके का सुझाव नहीं देते. फ़ॉन्ट मेट्रिक ओवरराइड करता है और size-adjust वेब फ़ॉन्ट/फ़ॉलबैक फ़ॉन्ट के मेल न खाने से जुड़ी मूल समस्या को ठीक करता है—line-height ऐसा नहीं करता (line-height, सीएसएस लाइन बॉक्स की ऊंचाई सेट करता है). इसके अलावा, आपको यह लग सकता है कि इस काम के लिए line-height का इस्तेमाल करना, आपके अनुमान से ज़्यादा गुमराह करने वाला है. इस लेख में, line-height के साथ काम करते समय ध्यान रखने वाली ज़रूरी बातों के बारे में बताया गया है.

फ़ॉलबैक फ़ॉन्ट चुनना

इस लेख में बताई गई तकनीकें, सभी के लिए उपलब्ध लोकल फ़ॉन्ट को बदलने के लिए, फ़ॉन्ट मेट्रिक ओवरराइड और size-adjust का इस्तेमाल करती हैं. ये तरीके, वेब फ़ॉन्ट का करीब से अनुमान लगाने वाले लोकल फ़ॉन्ट को ढूंढने की कोशिश नहीं करते. स्थानीय फ़ॉन्ट चुनते समय, इस बात का ध्यान रखना ज़रूरी है कि बहुत कम फ़ॉन्ट स्थानीय तौर पर हर डिवाइस पर उपलब्ध होते हैं. साथ ही, सभी डिवाइसों पर एक ही फ़ॉन्ट उपलब्ध नहीं होता.

Sans Serif फ़ॉन्ट के लिए Arial का सुझाव दिया जाता है. वहीं, सेरिफ़ फ़ॉन्ट के लिए Times New Roman का सुझाव दिया जाता है. हालांकि, इनमें से कोई भी फ़ॉन्ट Android पर उपलब्ध नहीं है. Android पर सिर्फ़ Roboto ही सिस्टम फ़ॉन्ट उपलब्ध है.

नीचे दिए गए उदाहरण में, वाइडस्पेड डिवाइस कवरेज पक्का करने के लिए तीन फ़ॉलबैक फ़ॉन्ट का इस्तेमाल किया गया है: Windows/Mac डिवाइसों को टारगेट करने वाला फ़ॉलबैक फ़ॉन्ट, Android डिवाइसों को टारगेट करने वाला फ़ॉलबैक फ़ॉन्ट, और सामान्य फ़ॉन्ट फ़ैमिली का इस्तेमाल करने वाला फ़ॉलबैक फ़ॉन्ट.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

ध्यान दें: कुछ अन्य स्थानीय फ़ॉन्ट भी फ़ॉन्ट फ़ॉलबैक के तौर पर इस्तेमाल किए जा सकते हैं. हालांकि, ऐसा करने के लिए उपयोगकर्ता के ऑपरेटिंग सिस्टम की जानकारी होना ज़रूरी है. उदाहरण के लिए, "Calibri", "Lucinda Sans", और "Impact" ऐसे फ़ॉन्ट हैं जो ज़्यादातर Windows पर उपलब्ध हैं. हालांकि, ये अन्य ऑपरेटिंग सिस्टम पर उपलब्ध नहीं हैं.

सुझाव, राय या शिकायत के लिए अनुरोध

अगर फ़ॉन्ट मेट्रिक ओवरराइड और size-adjust इस्तेमाल करने के अपने अनुभव के बारे में आपका कोई सुझाव है, तो कृपया हमसे संपर्क करें.