@font-face के लिए सीएसएस का साइज़ घटाना या बढ़ाना

जब वेब फ़ॉन्ट लोड होता है, तब दस्तावेज़ के फ़ॉन्ट साइज़ को नॉर्मलाइज़ करने और एक फ़ॉन्ट से दूसरे फ़ॉन्ट पर स्विच करते समय लेआउट शिफ़्ट होने से रोकने के लिए, इसके स्केल को बदला जा सकता है

Adam Argyle

नीचे दिए गए डेमो में font-size एक जैसा 64px है. साथ ही, इनमें से हर हेडर में सिर्फ़ font-family का अंतर है. बाईं ओर दिए गए उदाहरणों में बदलाव नहीं किया गया है और उनके आखिरी साइज़ अलग-अलग हैं. दाईं ओर दिए गए उदाहरणों में size-adjust का इस्तेमाल किया गया है, ताकि यह पक्का किया जा सके कि 64px का साइज़ एक जैसा है.

इस उदाहरण में, Chrome DevTools सीएसएस ग्रिड लेआउट डीबग टूल का इस्तेमाल ऊंचाई दिखाने के लिए किया गया है.

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

ब्राउज़र सहायता

• 92
• 92
• 92
• 17

सोर्स

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

1. नतीजों में ऊंचाई का अंतर.
2. विज़ुअल रूप से परेशान करने वाले कॉन्टेंट में बदलाव होना.
3. इंटरैक्टिव टारगेट एरिया को मूव करना (ड्रॉपडाउन इधर-उधर जंप करता है!).

मुख्य शब्द: फ़ॉन्ट फ़ैमिली बनाम टाइपफ़ेस: टाइपफ़ेस को उसके फ़ैमिली नेम और फ़ॉन्ट फ़ेस से जाना जाता है. Helvetica Bold का मतलब बोल्ड टाइपफ़ेस से है, जबकि Helvetica आम तौर पर आठ से ज़्यादा टाइपफ़ेस (नॉर्मल, बोल्ड, इटैलिक वगैरह) वाले पूरे फ़ैमिली ग्रुप के लिए है. सीएसएस @font-face में आपको टाइपफ़ेस का इस्तेमाल करना होगा. हालांकि, इनका इस्तेमाल करने के लिए आपको font-family लिखना होगा.

size-adjust की मदद से फ़ॉन्ट का साइज़ कैसे बदलें

सिंटैक्स के बारे में जानकारी:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Adjusted Typeface नाम से पसंद के मुताबिक टाइपफ़ेस बनाता है.
2. हर ग्लिफ़ को उसके डिफ़ॉल्ट साइज़ से 150% तक बड़ा करने के लिए, size-adjust का इस्तेमाल करता है.
3. सिर्फ़ एक इंपोर्ट किए गए टाइपफ़ेस पर असर पड़ता है.

ऊपर दिए गए कस्टम टाइपफ़ेस का इस्तेमाल इस तरह करें:

h1 {
  font-family: "Adjusted Typeface";
}

चेतावनी: अगर ऊपर दिए गए डेमो में दूसरी हेडलाइन, पहली हेडलाइन से बड़ी नहीं है, तो आपके ब्राउज़र पर size-adjust काम नहीं करता.

फ़ॉन्ट को आसानी से बदलने की सुविधा की मदद से, सीएलएस को कम करना

नीचे दिए गए GIF में, बाईं ओर दिए गए उदाहरण देखें और फ़ॉन्ट बदलने पर, टेक्स्ट में होने वाले बदलाव को देखें. यह सिर्फ़ एक हेडलाइन एलिमेंट वाला एक छोटा सा उदाहरण है और इस समस्या पर लोगों का ध्यान अपनी ओर खींचना होगा.

बाईं ओर दिए गए उदाहरण में लेआउट शिफ़्ट है, जबकि दाईं ओर वाले उदाहरण में लेआउट शिफ़्ट नहीं है.

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

फ़ॉन्ट को बदलने पर, ज़्यादा कॉन्टेंट का लेआउट शिफ़्ट होने की संभावना ज़्यादा होती है

@font-face नियम में size-adjust को शामिल करने पर, यह फ़ॉन्ट फ़ेस के लिए ग्लोबल ग्लिफ़ अडजस्टमेंट सेट करता है. सही समय सेट करने पर, विज़ुअल में न के बराबर बदलाव देखने को मिलेगा. साथ ही, इसे बिना किसी रुकावट के इस्तेमाल किया जा सकेगा. आसानी से बदलने के लिए, हाथ से अडजस्ट करें या Malte Ubl की मदद से साइज़ अडजस्ट कैलकुलेटर की सुविधा आज़माएं.

Google वेब फ़ॉन्ट चुनें और पहले से अडजस्ट किया गया @font-face स्निपेट पाएं.

इस पोस्ट की शुरुआत में, फ़ॉन्ट साइज़ की समस्या को ठीक करने के लिए, कई बार कोशिश की गई. size-adjust को सोर्स कोड में तब तक बदला जाता रहा, जब तक कि Cookie और Arial में मौजूद हेडर ने उसी 64px को रेंडर नहीं कर दिया जो Press Start 2P ने स्वाभाविक रूप से रेंडर किया था. मैंने टारगेट फ़ॉन्ट साइज़ के साथ दो फ़ॉन्ट अलाइन किए हैं.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

फ़ॉन्ट कैलिब्रेट करना

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

size-adjust कैलिब्रेशन के लिए रणनीतियां:

1. रिमोट टारगेट:
   डाउनलोड किए गए फ़ॉन्ट के हिसाब से स्थानीय फ़ॉन्ट में बदलाव करें.
2. लोकल टारगेट:
   डाउनलोड किए गए फ़ॉन्ट को लोकल टारगेट फ़ॉन्ट के हिसाब से अडजस्ट करें.

पहला उदाहरण: रिमोट टारगेट

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

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

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

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

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

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

चेतावनी: font-family का क्रम अहम है. यहीं क्रम और प्राथमिकता तय होती है. सबसे पहले यह पक्का करें कि आपको जिस टाइपफ़ेस की ज़रूरत है वह सबसे पहले हो. इसके अलावा, हो सकता है कि local(Arial) आपके उपयोगकर्ता के सभी डिवाइसों पर उपलब्ध न हो. इसलिए, font-family में कई फ़ॉलबैक देना ज़रूरी है.

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

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

दूसरा उदाहरण: लोकल टारगेट

यहां दिया गया स्निपेट, ब्रैंड के कस्टम फ़ॉन्ट को Arial से मैच करने के लिए अडजस्ट करता है:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

इस रणनीति का फ़ायदा यह है कि इसमें किसी भी तरह के बदलाव किए बिना रेंडर किया जाता है. इसके बाद, आने वाले फ़ॉन्ट को मैच करने के लिए अडजस्ट किया जाता है.

ascent-override, descent-override, और line-gap-override की मदद से, ज़्यादा बेहतर तरीके से ट्यून करना

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

ascent-override

ब्राउज़र सहायता

• 87
• 87
• 89
• x

सोर्स

ascent-override डिस्क्रिप्टर, फ़ॉन्ट की बेसलाइन के ऊपर की ऊंचाई बताता है.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

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

descent-override

ब्राउज़र सहायता

• 87
• 87
• 89
• x

सोर्स

descent-override डिस्क्रिप्टर, फ़ॉन्ट के बेसलाइन के नीचे की ऊंचाई तय करता है.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

लाल रंग की हेडलाइन (जिसे अडजस्ट नहीं किया गया है) के नीचे D और O बेसलाइन के नीचे जगह है. वहीं, नीले रंग की हेडलाइन को इस तरह से अडजस्ट किया गया है कि इसके अक्षर, बेसलाइन पर आरामदेह हों.

line-gap-override

ब्राउज़र सहायता

• 87
• 87
• 89
• x

सोर्स

line-gap-override डिस्क्रिप्टर, फ़ॉन्ट के लिए लाइन-गैप मेट्रिक तय करता है. यह फ़ॉन्ट के लिए सुझाई गई लाइन-गैप या बाहरी लीडिंग है.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

लाल रंग की हेडलाइन (जिसे अडजस्ट नहीं किया गया है) में line-gap-override नहीं है, क्योंकि यह 0% पर है. वहीं, नीले रंग की हेडलाइन को 50% तक अडजस्ट किया गया है, ताकि वर्णों के ऊपर और नीचे स्पेस बन सके.

यह रही पूरी जानकारी

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

चेतावनी: अगर ऊपर दिए गए किसी भी डेमो में अंतर नहीं दिख रहा है, तो इसका मतलब है कि आपका ब्राउज़र, बदलावों को लागू करने की सुविधा के साथ काम नहीं करता.

नतीजा

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

• सीएसएस फ़ॉन्ट लेवल 5 के लिए स्पेसिफ़िकेशन
• एमडीएन पर साइज़ एडजस्ट करना
• @font-face जनरेटर को आसानी से स्वैप करने की सुविधा
• web.dev पर कुल लेआउट शिफ़्ट (सीएलएस)
• फ़ॉन्ट लोड करने के असर को कम करने का नया तरीका: सीएसएस फ़ॉन्ट की जानकारी देने वाले

Unsplash पर मौजूद, Kristian Strand की फ़ोटो