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

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

Adam Argyle

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

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 92
• 92
• 92
• 17

सोर्स

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

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

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

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

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

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

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

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

@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";
}

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

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

ब्रैंड टाइपफ़ेस को टारगेट के तौर पर इस्तेमाल करने पर भी, Malte का कैलकुलेटर काम करता है. कोई Google फ़ॉन्ट चुनें. इसके बाद, यह फ़ॉन्ट Arial के साथ आसानी से बदलने के लिए, Arial में बदलाव कर देगा. यहां कैलकुलेटर से 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 के लिए स्पेसिफ़िकेशन
• एमडीएन पर साइज़ अडजस्ट करना
• Seamless swap @font-face generator
• web.dev पर कुल लेआउट शिफ़्ट (सीएलएस)
• फ़ॉन्ट लोड होने से होने वाले असर को कम करने का नया तरीका: सीएसएस फ़ॉन्ट डिस्क्रिप्टर

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