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

Katie Hempenius

खास जानकारी

इस लेख में फ़ॉन्ट फ़ॉलबैक और 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 का इस्तेमाल किया जा रहा है. इस वजह से, पेज का कॉन्टेंट जल्दी पढ़ने लायक और काम का होता है. हालांकि, ऐतिहासिक तौर पर, इसकी वजह से लेआउट को ठीक से काम नहीं कर रहा था: लेआउट शिफ़्ट आम तौर पर तब होता है, जब फ़ॉलबैक फ़ॉन्ट को वेब फ़ॉन्ट की जगह इस्तेमाल किया जाता है. हालांकि, नीचे बताए गए नए एपीआई इस समस्या को कम कर सकते हैं या खत्म कर सकते हैं. ऐसा करने पर, उन फ़ॉलबैक फ़ॉन्ट फ़ेस बनाए जा सकते हैं जो उनके वेब फ़ॉन्ट वाले हिस्से के बराबर जगह लेते हैं.

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

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

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

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

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

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

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

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

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

उदाहरण के लिए, 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 की वैल्यू, वेब फ़ॉन्ट के मेटाडेटा से मिलती हैं. इस लेख के अगले सेक्शन में, इन वैल्यू को पाने का तरीका बताया गया है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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 = 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] वर्णों की फ़्रीक्वेंसी के मुताबिक औसत चौड़ाई का हिसाब लगाएं. यह लेख, अंग्रेज़ी के अक्षरों की फ़्रीक्वेंसी और शब्दों की औसत लंबाई के लिए एक अच्छी जानकारी है.

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

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

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

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

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

इस लेख में बताई गई तकनीकें, सभी के लिए उपलब्ध लोकल फ़ॉन्ट को बदलने के लिए, फ़ॉन्ट मेट्रिक ओवरराइड और 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%;
}

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

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