फॉलबैक फॉन्ट के आभासी आकार को वेबफॉन्ट से मिलाने के लिए, CSS font-size-adjust से उनके x-height को सामान्य करें, या किसी विशिष्ट फॉलबैक फेस को size-adjust से स्केल करें। यह गाइड Mac डेस्कटॉप ब्राउज़र में समायोजन चुनने, गणना करने और परीक्षण करने की प्रक्रिया बताता है।

अपने टेक्स्ट से मेल खाने वाला मेट्रिक चुनें

सामान्य अंग्रेजी बॉडी टेक्स्ट के लिए, x-height से शुरू करें: फॉन्ट आकार के सापेक्ष लोअरकेस अक्षरों की ऊंचाई। दो फॉन्ट 16px पर सेट होने पर अलग-अलग x-height रख सकते हैं, इसलिए समान CSS आकार आवश्यक रूप से समान नहीं दिखते। MDN टेक्स्ट रेंडर करने के लिए उपयोग किए जाने वाले फॉन्ट में चुने गए फॉन्ट मेट्रिक को सामान्य करने के लिए विशेष रूप से font-size-adjust का दस्तावेज़ीकरण करता है। MDN: font-size-adjust

मान बदलने से पहले मेट्रिक चुनें। लोअरकेस-भारी पैराग्राफ आमतौर पर ex-height का सुझाव देते हैं; अपरकेस लेबल cap-height की मांग कर सकते हैं। ch-width विकल्प जीरो कैरेक्टर की एडवांस चौड़ाई को सामान्य करता है, जो लोअरकेस ऊंचाई मिलाने से अलग सवाल का जवाब देता है। इनमें से कोई भी विकल्प हर शब्द के लिए समान चौड़ाई का वादा नहीं करता। MDN: font-size-adjust मान

इस कार्य के लिए, एक सिंथेटिक पेज का उपयोग करें जिसमें Sample collection जैसा हेडिंग, Tile 024 जैसा लेबल, और Amber tiles sit beside a blue circle. Each tile has a short label. जैसा पैराग्राफ हो। लक्ष्य है फॉलबैक के लोअरकेस टेक्स्ट को समान आकार का दिखाना जबकि यह जांचना कि ये तत्व अभी भी फिट होते हैं।

आपका तात्कालिक कार्य इसके साथ शुरू करें अलग से क्या जांचें
फॉन्ट स्टैक में लोअरकेस आकार सामान्य करें टार्गेट x-height अनुपात के साथ font-size-adjust रैपिंग और लाइन स्पेसिंग
एक ज्ञात फॉलबैक फेस ट्यून करें size-adjust के साथ एक फॉलबैक एलियास उस सटीक स्थानीय फेस की उपलब्धता
वर्टिकल लेआउट में अंतर कम करें आकार मिलान के बाद फॉन्ट मेट्रिक ओवरराइड बेसलाइन और पैराग्राफ ऊंचाई

पहले दो तंत्रों के अलग-अलग स्कोप हैं: font-size-adjust टेक्स्ट पर लागू होता है, जबकि size-adjust @font-face नियम के अंदर होता है और उस फेस के आउटलाइन और मेट्रिक्स को स्केल करता है। MDN: font-size-adjust, MDN: size-adjust

अपने Mac पर विश्वसनीय तुलना स्थापित करें

एक प्रीव्यू पेज उपयोग करें जिसका स्टाइलशीट आप संपादित कर सकें। नीचे के उदाहरण मौजूदा वेबफॉन्ट को Sample Web कहते हैं; इसका वास्तविक CSS परिवार नाम डालें। ये एकीकरण टुकड़े हैं, यह मानते हुए कि वेबफॉन्ट पहले से घोषित है और सैंपल तत्व मौजूद हैं।

Mac पर Chrome में, सैंपल पैराग्राफ पर राइट-क्लिक करके Inspect चुनें। वैकल्पिक रूप से, Command + Option + C दबाएं और इसे चुनें। Chrome Elements पैनल खोलता है, जहां Styles लागू CSS दिखाता है। Chrome: Chrome DevTools खोलें

Computed खोलें, Rendered Fonts तक स्क्रॉल करें, और पुष्टि करें कि कौन सा फॉन्ट वास्तव में सैंपल बनाता है। केवल घोषित परिवार सूची यह स्थापित नहीं करती कि पसंदीदा फॉन्ट रेंडर हो रहा है। Chrome का दस्तावेज़ीकरण इस खंड का उपयोग स्थानीय और नेटवर्क फॉन्ट संसाधनों को अलग करने के लिए दर्शाता है। Chrome: अन्य प्रभाव लागू करें

तुलना के दौरान व्यूपोर्ट, ज़ूम, फॉन्ट वेट, फॉन्ट स्टाइल, लेटर स्पेसिंग और कंटेनर चौड़ाई को स्थिर रखें। पहले वेबफॉन्ट स्थिति का निरीक्षण करें। फिर पैराग्राफ के font-family को अस्थायी रूप से अपने इच्छित फॉलबैक में बदलें, जैसे Arial, sans-serif, और रेंडर्ड फॉन्ट का फिर से निरीक्षण करें।

घोषणाओं और उनके चेकबॉक्स को संपादित करने और समायोजन टॉगल करने के लिए Styles उपयोग करें। इससे एक ही पैराग्राफ की तुलना करना संभव होता है बिना इसके शब्दों या लेआउट को बदले। Chrome: CSS सुविधाएं संदर्भ

JavaScript के माध्यम से माप लेते समय, संबंधित फॉन्ट लोड की प्रतीक्षा करें मनमाना विलंब उपयोग करने के बजाय। document.fonts.load() एक निर्दिष्ट फेस का अनुरोध कर सकता है; document.fonts.ready दस्तावेज़ के फॉन्ट लोडिंग और संबद्ध लेआउट ऑपरेशन समाप्त होने के बाद हल होता है। कोई भी वास्तविक रेंडर्ड फॉन्ट जांचने की जगह नहीं लेता। MDN: FontFaceSet.load(), MDN: FontFaceSet.ready

टार्गेट x-height अनुपात की गणना और लागू करें

संख्यात्मक font-size-adjust के लिए टार्गेट एक अनुपात है, विस्तार प्रतिशत नहीं। वेबफॉन्ट के x-height को उसके यूनिट्स प्रति em से विभाजित करें जब वे मेट्रिक्स सटीक फेस के लिए उपलब्ध हों। ब्राउज़र फिर प्रत्येक चयनित फॉन्ट को घोषित फॉन्ट आकार के उस टार्गेट अनुपात में समायोजित करता है। W3C: CSS Fonts Module Level 5

ये स्पष्ट रूप से उदाहरणात्मक इनपुट हैं, जो किसी नामित फॉन्ट के माप नहीं हैं:

मेट्रिक टार्गेट वेबफॉन्ट फॉलबैक
यूनिट्स प्रति em 1,000 1,000
फॉन्ट यूनिट्स में X-height 520 470
X-height अनुपात 0.52 0.47

घोषित आकार 16px पर, टार्गेट x-height है 16 × 0.52 = 8.32px। उस ऊंचाई तक पहुंचने के लिए, फॉलबैक को 0.52 ÷ 0.47 स्केल फैक्टर की आवश्यकता है, लगभग 1.106383। इसका समायोजित रेंडरिंग आकार लगभग 17.7021px है। ये गणनाएं विनिर्देश के सूत्र को दर्शाती हैं; वे वास्तविक रैपिंग का पूर्वानुमान नहीं लगातीं।

प्रॉपर्टी-आधारित दृष्टिकोण के लिए, टार्गेट अनुपात को टेक्स्ट पर लागू करें। यह CSS टुकड़ा मानता है कि सैंपल पैराग्राफ में क्लास sample-copy है:

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

यहां, 0.52 उदाहरणात्मक वेबफॉन्ट का है। इसे अपने टार्गेट फेस के अनुपात से बदलें। गलत मान देने से पसंदीदा फॉन्ट का रेंडर्ड आकार भी बदल जाता है; प्रॉपर्टी हर चयनित फॉन्ट पर लागू होती है, जिसमें वेबफॉन्ट भी शामिल है। W3C: CSS Fonts Module Level 5

यदि आपके पास विश्वसनीय अनुपात नहीं है, तो W3C एक विज़ुअल कैलिब्रेशन विधि का दस्तावेज़ीकरण करता है: उसी फॉन्ट, आकार और कंटेंट के दो सैंपल की तुलना करें, एक पर समायोजन अक्षम और दूसरे पर एक परीक्षण संख्यात्मक समायोजन के साथ। 0.5 से शुरू करें और तब तक परिष्कृत करें जब तक वे मेल न खाएं। कैलिब्रेशन के लिए बड़े आइसोलेटेड सैंपल उपयोग करें, फिर सामान्य पढ़ने के आकार पर लौटकर परिणाम का आकलन करें। विज़ुअली प्राप्त मान को अनुमान मानें। W3C: CSS Fonts Module Level 5

कीवर्ड from-font अपना टार्गेट पहले उपलब्ध फॉन्ट से लेता है। यदि इच्छित वेबफॉन्ट अनुपलब्ध है, तो इसका मतलब हो सकता है कि दूसरा फॉन्ट टार्गेट सप्लाई करे। एक फॉलबैक के लिए जो ज्ञात वेबफॉन्ट से मेल खाना चाहिए तब भी जब वह कभी लोड न हो, एक स्थापित संख्यात्मक अनुपात उपयोग करें। MDN: font-size-adjust मान

जब एक फेस पर नियंत्रण चाहिए तो फॉलबैक एलियास उपयोग करें

size-adjust चुनें जब आप स्केलिंग को किसी विशेष फॉलबैक फेस से जोड़ना चाहते हैं। ऊपर की उदाहरणात्मक जोड़ी के लिए, स्केल फैक्टर को प्रतिशत में बदलें: 100 × 0.52 ÷ 0.47 = 110.6383%। डिस्क्रिप्टर ग्लिफ एडवांस के साथ-साथ आउटलाइन और अन्य संबद्ध मेट्रिक्स को स्केल करता है। MDN: size-adjust

यह वैकल्पिक एकीकरण टुकड़ा मानता है कि Arial Regular स्थानीय रूप से उपलब्ध है और टार्गेट वेबफॉन्ट पहले से घोषित है। प्रतिशत उदाहरणात्मक है, इसलिए इसे अपनाने से पहले अपनी वास्तविक जोड़ी को मापें:

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

सिंथेटिक एलियास समायोजन को इस स्टैक तक विशिष्ट रखता है। इसके local() स्रोत किसी विशेष फॉन्ट फेस की पहचान करते हैं; वे मनमाना सिस्टम sans-serif चयन नहीं करते। CSS Fonts विनिर्देश प्लेटफॉर्म पर मिलान के लिए पूर्ण और PostScript नाम सप्लाई करने की सिफारिश करता है। यदि कोई स्रोत उपलब्ध नहीं है, तो ब्राउज़र शेष परिवार सूची के माध्यम से आगे बढ़ता है। W3C: CSS Fonts Module Level 4

इसे पिछली विधि के विकल्प के रूप में उपयोग करें। उस टेक्स्ट पर font-size-adjust लागू करना जो size-adjusted फेस का उपयोग करता है, इच्छित स्केलिंग को सामान्य कर सकता है, क्योंकि प्रॉपर्टी पहले से ओवरराइड मेट्रिक का उपयोग करती है। MDN: font-size-adjust विवरण

रैपिंग और बेसलाइन अंतरों का अलग से निदान करें

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

यदि लोअरकेस आकार सही लगता है लेकिन पैराग्राफ अलग तरह से रैप होता है, तो स्केल को और परिष्कृत करने से पहले दूसरा फॉलबैक तुलना करें। एक ऊंचाई मेट्रिक पर स्केलिंग अलग ग्लिफ डिज़ाइन को हर एडवांस चौड़ाई साझा नहीं कराती। वेबफॉन्ट और फॉलबैक स्थितियों में प्रत्येक लाइन पर अंतिम शब्द रिकॉर्ड करें ताकि शेष अंतर ठोस बने।

यदि बेसलाइन या ब्लॉक ऊंचाई अभी भी भिन्न है, तो ascent-override, descent-override और line-gap-override की जांच करें। ये लेआउट मेट्रिक्स को नियंत्रित करते हैं न कि दूसरा विज़ुअल आकार टार्गेट प्रदान करते हैं। उदाहरण के लिए, एसेंट बेसलाइन से ऊपर का मेट्रिक है जिसका उपयोग लाइन बॉक्स लेआउट में किया जाता है। असंबंधित प्रतिशत कॉपी करने के बजाय वास्तविक फॉन्ट जोड़ी से ओवरराइड प्राप्त करें। MDN: ascent-override

जनरेटेड शुरुआती बिंदु के लिए, Capsize का दस्तावेज़ीकृत createFontStack पसंदीदा-परिवार क्रम में मेट्रिक्स स्वीकार करता है और दोनों fontFamily और फॉलबैक fontFaces लौटाता है। दोनों आउटपुट एक साथ उपयोग करें। इसका दस्तावेज़ीकरण शामिल फॉन्ट के लिए @capsizecss/metrics और कस्टम फाइल से मेट्रिक्स निकालने के लिए @capsizecss/unpack भी प्रदान करता है। जनरेटेड घोषणाओं को अभी भी आपके सैंपल लेआउट के साथ परीक्षण की आवश्यकता है। Capsize दस्तावेज़ीकरण

ब्राउज़र लेआउट और टेक्स्ट शेपिंग बरकरार रखें

कैनवास माप स्ट्रिंग्स की तुलना में मदद कर सकते हैं, लेकिन वे संकीर्ण सवालों का जवाब देते हैं। WHATWG measureText().width को एडवांस चौड़ाई के रूप में परिभाषित करता है, जबकि वास्तविक बाउंडिंग-बॉक्स माप ड्रॉन टेक्स्ट का वर्णन करते हैं। कैनवास एक काल्पनिक अनंत चौड़ी लाइन तैयार करता है, इसलिए इसकी चौड़ाई रैप्ड DOM पैराग्राफ का माप नहीं है। WHATWG: HTML Standard, Canvas

अपने टेस्ट में पूरे शब्द और वाक्य साथ रखें। टेक्स्ट को अलग-अलग स्थित कैरेक्टर के रूप में पुनर्निर्मित करने या यह मानने से बचें कि जोड़े गए कैरेक्टर चौड़ाई एक शेप्ड स्ट्रिंग पुन: प्रस्तुत करते हैं। CSS स्पेसिंग या अलाइनमेंट परिवर्तन वाली सीमाओं सहित, इंलाइन सीमाओं पर शेपिंग को नियंत्रित करने वाली शर्तों को परिभाषित करता है। अपने कंपोनेंट की सामान्य संरचना को संरक्षित करें जब इसके फॉन्ट फॉलबैक को मान्य कर रहे हों। W3C: CSS Text Module Level 3

ब्राउज़र सपोर्ट जांचें और तुलना समाप्त करें

MDN बेसिक font-size-adjust को Baseline 2024 और size-adjust को सितंबर 2023 से व्यापक रूप से उपलब्ध सूचीबद्ध करता है। यह पुराने ब्राउज़र में हर नए मेट्रिक या कीवर्ड के लिए सपोर्ट स्थापित नहीं करता। आपके द्वारा वास्तव में उपयोग किए जाने वाले सिंटैक्स के लिए कम्पैटिबिलिटी टेबल देखें। MDN: font-size-adjust, MDN: size-adjust

जहां एक उन्नत मेट्रिक रूप अनुपलब्ध है, समर्थित संख्यात्मक x-height सामान्यीकरण का उपयोग करें जब यह कार्य के अनुकूल हो, या एक समर्थित फॉलबैक-विशिष्ट डिस्क्रिप्टर। यदि आवश्यक समायोजन पूरी तरह से असमर्थित है, तो एक विज़ुअली करीब फॉलबैक बनाए रखें और उस ब्राउज़र में अनसमायोजित लेआउट सत्यापित करें।

हर वेट और स्टाइल के लिए तुलना दोहराकर समाप्त करें जिनका आप उपयोग करते हैं, फिर उन Mac ब्राउज़र में जिन्हें आप सपोर्ट करना चाहते हैं। हर बार रेंडर्ड फेस की पुष्टि करें। चुने गए समायोजन को केवल तब रखें जब सिंथेटिक हेडिंग, लेबल और पैराग्राफ में वेबफॉन्ट और फॉलबैक दोनों स्थितियों में स्वीकार्य आभासी आकार, रैपिंग और स्पेसिंग हो।

स्रोत