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

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

Adam Argyle

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

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

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

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

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

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

कोई 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. लोकल टारगेट:
    डाउनलोड किए गए फ़ॉन्ट को लोकल टारगेट फ़ॉन्ट के हिसाब से अडजस्ट करें.

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

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

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

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

@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

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

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

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

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

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

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

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

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

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

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