खास जानकारी
इस लेख में, फ़ॉन्ट के फ़ॉलबैक और 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
उदाहरण के लिए, ये पॉपिंस फ़ॉन्ट के लिए बदलने वाली फ़ॉन्ट मेट्रिक हैं:
/*
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 एक वेबसाइट है जो आपको ब्राउज़र से फ़ॉन्ट टेबल और फ़ॉन्ट से जुड़ी दूसरी जानकारी देखने की सुविधा देती है.
- फ़ॉन्ट फ़ोर्ज एक लोकप्रिय डेस्कटॉप फ़ॉन्ट एडिटर है.
ascent
,descent
, औरline-gap
देखने के लिए:Font Info
डायलॉग खोलें. इसके बाद,OS/2
मेन्यू चुनें, फिरMetrics
टैब चुनें.UPM
देखने के लिए:Font Info
डायलॉग खोलें. इसके बाद,General
मेन्यू चुनें.
फ़ॉन्ट टेबल के बारे में जानकारी
आपने देखा होगा कि "ऐसेंट" जैसे कॉन्सेप्ट को कई मेट्रिक से रेफ़र किया जाता है—उदाहरण के लिए, hheaAscent
, typoAscent
, और winAscent
मेट्रिक हैं. फ़ॉन्ट रेंडरिंग के लिए अलग-अलग ऑपरेटिंग सिस्टम अलग-अलग तरीके अपनाते हैं. इसकी वजह से ऐसा हुआ है: Nexus डिवाइसों पर प्रोग्राम आम तौर पर hhea*
फ़ॉन्ट मेट्रिक का इस्तेमाल करते हैं, जबकि Windows डिवाइसों पर प्रोग्राम आम तौर पर typo*
(इसे sTypo*
भी कहा जाता है) या 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
का सुझाव सिर्फ़ तब दिया जाता है, जब आपके पास उपयोगकर्ता के ऑपरेटिंग सिस्टम के आधार पर अपनी स्टाइलशीट बदलने की सुविधा हो.
फ़ॉन्ट मेट्रिक के बदलावों का इस्तेमाल करना
फ़ॉन्ट मेट्रिक के बदलावों को कैलकुलेट करने के लिए, वेब फ़ॉन्ट के मेटाडेटा से मिले मेज़रमेंट का इस्तेमाल किया जाता है, न कि फ़ॉलबैक फ़ॉन्ट के. इसलिए, वे एक जैसे ही रहते हैं. इस बात से कोई फ़र्क़ नहीं पड़ता कि किसी फ़ॉन्ट को फ़ॉलबैक फ़ॉन्ट के तौर पर इस्तेमाल किया गया है. उदाहरण के लिए:
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
का इस्तेमाल किया जाता है. वेब फ़ॉन्ट के करीब-करीब बराबर स्थानीय फ़ॉन्ट ढूंढने की कोशिश नहीं की जाती है. लोकल फ़ॉन्ट चुनते समय यह ध्यान रखना ज़रूरी है कि बहुत कम फ़ॉन्ट को स्थानीय तौर पर बड़े पैमाने पर उपलब्ध कराया जाता है. साथ ही, सभी डिवाइसों पर एक भी फ़ॉन्ट मौजूद नहीं होगा.
सैन्स-सेरिफ़ फ़ॉन्ट के लिए 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
को इस्तेमाल करने के अपने अनुभव के बारे में अगर आपका कोई सुझाव, शिकायत या राय है, तो कृपया हमसे संपर्क करें.