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

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

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

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

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

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

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

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

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

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

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

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

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

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-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

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

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

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

descent-override

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

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

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

line-gap-override

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 पर कुल लेआउट शिफ़्ट (सीएलएस)
• फ़ॉन्ट लोड होने से होने वाले असर को कम करने का नया तरीका: सीएसएस फ़ॉन्ट डिस्क्रिप्टर

Unस्प्लैश पर क्रिस्टियन स्ट्रैंड की फ़ोटो