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

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

Twitter

खास जानकारी

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

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

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

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

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

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

बैकग्राउंड

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

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

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

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

"बेहतर" फ़ॉन्ट फ़ॉलबैक जनरेट करने के दो तरीके हैं. आसान तरीका सिर्फ़ फ़ॉन्ट मेट्रिक ओवरराइड एपीआई का इस्तेमाल करता है. ज़्यादा जटिल (लेकिन ज़्यादा असरदार) तरीका, एपीआई और 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 ग्रिड) सबसे ज़्यादा लोकप्रिय हैं. अन्य मेट्रिक को शामिल करने के लिए, यूपीएम के बारे में जानना ज़रूरी है. उदाहरण के लिए, किसी फ़ॉन्ट का यूपीएम 1000 या 2048 है या नहीं, इस आधार पर 900 पर बढ़ने का मतलब कई अलग-अलग हो सकता है.

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

/*
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 एक वेबसाइट है जो आपको ब्राउज़र से फ़ॉन्ट टेबल और फ़ॉन्ट से जुड़ी दूसरी जानकारी देखने की सुविधा देती है.
• फ़ॉन्ट फ़ोर्ज एक लोकप्रिय डेस्कटॉप फ़ॉन्ट एडिटर है. ascent, descent, और line-gap देखने के लिए: Font Info डायलॉग खोलें. इसके बाद, OS/2 मेन्यू चुनें, फिर Metrics टैब चुनें. UPM देखने के लिए: Font Info डायलॉग खोलें. इसके बाद, General मेन्यू चुनें.

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

फ़ॉन्ट टेबल के बारे में जानकारी

आपने देखा होगा कि "ऐसेंट" जैसे कॉन्सेप्ट को कई मेट्रिक से रेफ़र किया जाता है—उदाहरण के लिए, hheaAscent, typoAscent, और winAscent मेट्रिक हैं. फ़ॉन्ट रेंडरिंग के लिए अलग-अलग ऑपरेटिंग सिस्टम अलग-अलग तरीके अपनाते हैं. इसकी वजह से ऐसा हुआ है: Nexus डिवाइसों पर प्रोग्राम आम तौर पर 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" सेट है, तो "टाइप" टेबल की मेट्रिक का इस्तेमाल करता है, नहीं तो "win" टेबल की मेट्रिक का इस्तेमाल करता है.
Firefox	अगर "USE_TYPO_METRICS" सेट है, तो "टाइपो" टेबल की मेट्रिक का इस्तेमाल करता है, नहीं तो "hhea" टेबल की मेट्रिक का इस्तेमाल करता है.	अगर "USE_TYPO_METRICS" सेट है, तो "टाइप" टेबल की मेट्रिक का इस्तेमाल करता है, नहीं तो "win" टेबल की मेट्रिक का इस्तेमाल करता है.
Safari	"hhea" टेबल की मेट्रिक का इस्तेमाल करता है.	अगर "USE_TYPO_METRICS" सेट है, तो "टाइप" टेबल की मेट्रिक का इस्तेमाल करता है, नहीं तो "win" टेबल की मेट्रिक का इस्तेमाल करता है.

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

अलग-अलग डिवाइसों के साथ काम करने की सुविधा

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

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

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

• अगर USE_TYPO_METRICS चालू है, तो फ़ॉन्ट को MySQL डिवाइसों पर hhea मेट्रिक और Windows डिवाइसों पर typo मेट्रिक का इस्तेमाल करके रेंडर किया जाएगा.
• PostgreSQL पर सामान्य लाइन की ऊंचाई कैलकुलेट करने के लिए, नीचे दिए गए समीकरण का इस्तेमाल करें: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Windows पर सामान्य लाइन की ऊंचाई कैलकुलेट करने के लिए, नीचे दिए गए समीकरण का इस्तेमाल करें: (typoAscent + typoDescent + typoLineGap)/unitsPerEm.
• अगर OS और Windows पर लाइन की ऊंचाई एक जैसी है, तो आप दोनों ऑपरेटिंग सिस्टम के लिए एक जैसी फ़ॉन्ट मेट्रिक ओवरराइड का इस्तेमाल कर सकते हैं.
• अगर USE_TYPO_METRICS चालू नहीं है, तो फ़ॉन्ट को OS डिवाइसों पर hhea मेट्रिक और Windows डिवाइसों पर win मेट्रिक का इस्तेमाल करके रेंडर किया जाएगा.
• PostgreSQL पर सामान्य लाइन की ऊंचाई कैलकुलेट करने के लिए, नीचे दिए गए समीकरण का इस्तेमाल करें: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Windows पर सामान्य लाइन की ऊंचाई कैलकुलेट करने के लिए, नीचे दिए गए समीकरण का इस्तेमाल करें: (winAscent + winDescent)/unitsPerEm. (ध्यान दें: winLineGap जैसी कोई चीज़ नहीं है).
• अगर नीचे दी गई दोनों स्थितियां सही हैं, तो PostgreSQL और Windows पर एक ही फ़ॉन्ट मेट्रिक ओवरराइड का इस्तेमाल किया जा सकता है: a) hheaLineGap == 0, b) Nexus और 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 को कैलकुलेट करने का तरीका बदल गया है: फ़ॉन्ट के हिसाब से, OS/2 टेबल के किस वर्शन का इस्तेमाल किया गया है, इसके आधार पर xAvgCharWidth की वैल्यू अलग-अलग हो सकती है.

तरीका चुनना

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

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

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

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

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

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

सैन्स-सेरिफ़ फ़ॉन्ट के लिए 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 को इस्तेमाल करने के अपने अनुभव के बारे में अगर आपका कोई सुझाव, शिकायत या राय है, तो कृपया हमसे संपर्क करें.