प्रॉम्प्ट और संदर्भ
एक डिज़ाइन सिस्टम ब्रांड फ़ॉन्ट का उपयोग करता है, लेकिन नेटवर्क की स्थिति, लाइसेंसिंग, या स्क्रिप्ट कवरेज के कारण ब्राउज़र फ़ॉलबैक का उपयोग कर सकता है। बताएं कि font-size-adjust लोअरकेस साइज़ में महसूस होने वाले जंप को कैसे कम कर सकता है और यह मोबाइल टेक्स्ट ऑटोसाइज़िंग से कैसे भिन्न है।
इंटरव्यूअर क्या टेस्ट कर रहा है
- यह समझ कि x-height और फ़ॉन्ट साइज़ अलग-अलग मेट्रिक्स हैं।
- फ़ॉलबैक कैलिब्रेशन, लोडिंग, और प्रोग्रेसिव-एन्हांसमेंट सीमाओं को परिभाषित करने की क्षमता।
- विज़ुअल निरंतरता, स्क्रिप्ट कवरेज, और एक्सेसिबिलिटी जांच को संयोजित करने की क्षमता।
पहले स्पष्ट करने योग्य प्रश्न
- प्राथमिक और फ़ॉलबैक फ़ॉन्ट्स किन स्क्रिप्ट्स को कवर करते हैं?
- क्या लक्ष्य लोडिंग-टाइम जंप को कम करना है, या स्थायी फ़ॉलबैक को पठनीय बनाए रखना है?
- क्या मोबाइल टेक्स्ट ऑटोसाइज़िंग की अनुमति है, और कौन से साइज़ व line-height टोकन्स पहले से मौजूद हैं?
30-सेकंड का उत्तर
font-size-adjust फ़ॉन्ट मेट्रिक का उपयोग करके रिलेटिव लोअरकेस ऊंचाई को कैलिब्रेट करता है। मैं प्राथमिक और फ़ॉलबैक फ़ॉन्ट्स को मापूंगा, फिर एक स्पष्ट अनुपात या from-font का प्रोग्रेसिव तरीके से उपयोग करूंगा। यह ग्लिफ़ की चौड़ाई, लाइन की ऊंचाई, या CJK मेट्रिक्स को समान नहीं बना सकता है, इसलिए मैं स्क्रिप्ट्स, ज़ूम, लोडिंग विफलता, और लो-विज़न सेटिंग्स का परीक्षण करूंगा। text-size-adjust मोबाइल टेक्स्ट ऑटोसाइज़िंग के लिए एक अलग नियंत्रण है, न कि फ़ॉलबैक-फ़ॉन्ट कैलिब्रेशन टूल।
चरण-दर-चरण गहन विश्लेषण
1. साइज़ को x-height से अलग करें
font-size-adjust लोअरकेस अक्षरों को प्राथमिक फ़ॉन्ट के समान एक पठनीय ऊंचाई पर रखता है। 16px पर सेट किए गए दो फ़ॉन्ट्स में अलग-अलग x-heights हो सकती हैं, जिससे फ़ॉलबैक छोटा या बड़ा दिख सकता है। यह प्रॉपर्टी एक रिलेटिव मेट्रिक को समायोजित करती है; यह प्राथमिक टाइपफ़ेस को पुन: प्रस्तुत नहीं करती है।
2. एक स्पष्ट अनुपात या from-font चुनें
जब टीम ने प्राथमिक मेट्रिक को माप लिया हो, तो एक स्पष्ट मान काम करता है। from-font के साथ, एक समर्थित ब्राउज़र उपलब्ध फ़ॉन्ट से मेट्रिक पढ़ सकता है और मैन्युअल रूप से ट्यून किए गए कॉन्स्टेंट को कम कर सकता है। ब्राउज़र मैट्रिक्स और फ़ॉन्ट फ़ाइलों को अभी भी सत्यापन की आवश्यकता है।
3. कैलिब्रेशन को टाइपोग्राफी टोकन्स के करीब रखें
:root {
--body-size: 1rem;
}
body {
font-family: "Brand Sans", "Fallback Sans", sans-serif;
font-size: var(--body-size);
font-size-adjust: from-font;
line-height: 1.5;
}यह प्रॉपर्टी एलिमेंट और उसके डिसेंडेंट्स को प्रभावित करती है। इसे body टाइपोग्राफी टोकन के करीब रखने से असंबंधित कंपोनेंट्स द्वारा मनमाने क्षतिपूर्ति मान बनाने से बचा जा सकता है। प्रॉपर्टी असमर्थित होने पर भी एक पठनीय स्टैक फ़ॉलबैक बना रहता है।
4. लोडिंग क्रम को संभालें
कैलिब्रेशन फ़ॉन्ट्स की अदला-बदली (swap) के कारण होने वाले हर बदलाव को दूर नहीं करता है। इसे एक सुविचारित font-display नीति, प्रीलोड निर्णयों, और एक स्वीकार्य फ़ॉलबैक के साथ संयोजित करें। प्रारंभिक पठनीयता, टेक्स्ट रीफ़्लो, और अंतिम फ़ॉन्ट स्थिति को अलग से मापें; शून्य हलचल प्राप्त करने के लिए सामग्री को न छिपाएं।
5. स्क्रिप्ट्स और लोकेल्स का परीक्षण करें
लैटिन लोअरकेस अनुपात चीनी, जापानी, अरबी, या मिश्रित टेक्स्ट के लिए सार्वभौमिक विकल्प नहीं है। स्थानीयकृत नमूने बनाएं और विराम चिह्न, संख्या, भार (weight), रैपिंग, और लाइन की ऊंचाई का निरीक्षण करें। एक अनुपात को सार्वभौमिक सत्य मानने के बजाय आवश्यकता पड़ने पर लोकेल-विशिष्ट टोकन्स का उपयोग करें।
6. इसे text-size-adjust से अलग रखें
text-size-adjust मोबाइल व्यूपोर्ट्स में ब्राउज़र टेक्स्ट इन्फ्लेशन को नियंत्रित करता है। यह फ़ॉलबैक x-height को कैलिब्रेट नहीं करता है। प्रॉपर्टी चुनने से पहले पहचानें कि समस्या फ़ॉन्ट मेट्रिक है या मोबाइल लेआउट व्यवहार, और गलत समस्या को ठीक करने के लिए किसी एक्सेसिबिलिटी व्यवहार को अक्षम करने से बचें।
7. देखने योग्य स्वीकृति मानदंड परिभाषित करें
वास्तविक लक्षित ब्राउज़रों और उपकरणों पर फ़ॉन्ट-लोड सफलता, लेआउट परिवर्तन, ज़ूम ट्रंकेशन, और उपयोगकर्ता फ़ॉन्ट सेटिंग्स के तहत पठनीयता को रिकॉर्ड करें। रिलीज़ गेट में विज़ुअल रिग्रेशन, स्क्रीन-रीडर, कीबोर्ड, और हाई-कंट्रास्ट जांच शामिल करें।
मॉडल उत्तर
मैं इसे टाइपोग्राफी-मेट्रिक गवर्नेंस के रूप में देखूंगा। मैं प्राथमिक और फ़ॉलबैक x-heights का नमूना लूंगा, body टोकन के पास एक स्पष्ट अनुपात या from-font लागू करूंगा, और एक विश्वसनीय स्टैक बनाए रखूंगा। यह रिलेटिव लोअरकेस पठनीयता में सुधार कर सकता है लेकिन समान चौड़ाई, लाइन हाइट्स, या मिश्रित CJK लेआउट की गारंटी नहीं दे सकता है, इसलिए मैं सफल और विफल फ़ॉन्ट लोड, स्क्रिप्ट्स, ब्राउज़र ज़ूम, और मोबाइल उपकरणों का परीक्षण करूंगा। मोबाइल ऑटोसाइज़िंग text-size-adjust के अंतर्गत आता है। स्वीकृति केवल एक स्क्रीनशॉट के बजाय लेआउट, ट्रंकेशन, पठनीयता, और एक्सेसिबिलिटी साक्ष्यों का उपयोग करेगी।
सामान्य गलतियाँ
- यह दावा करना कि
font-size-adjustप्रत्येक फ़ॉन्ट को समान साइज़ का बना देता है। from-fontको हर ब्राउज़र और फ़ॉन्ट फ़ाइल में समर्थित मान लेना।- एक सामान्य सुधार के रूप में
text-size-adjust: noneके साथ मोबाइल एन्लार्जमेंट को अक्षम करना। - केवल अंग्रेज़ी की पहली स्क्रीन का परीक्षण करना और स्थानीय स्क्रिप्ट्स या लोड विफलता का कभी परीक्षण न करना।
- ज़ूम, उपयोगकर्ता फ़ॉन्ट सेटिंग्स, और स्क्रीन रीडर्स की अनदेखी करते हुए केवल लेआउट मेट्रिक को देखना।
फॉलो-अप प्रश्न और उत्तर
क्या होगा यदि डिज़ाइन के लिए समान चौड़ाई की भी आवश्यकता हो?
स्पष्ट करें कि यह प्रॉपर्टी केवल रिलेटिव ऊंचाई मेट्रिक को संभालती है। एक करीबी फ़ॉलबैक चुनें, स्पेसिंग ट्यून करें, या रैपिंग को फिर से डिज़ाइन करें; यह वादा न करें कि एक अनुपात हर मेट्रिक को हल करता है।
जब from-font अनुपलब्ध हो तो आप ग्रेसफुल डिग्रेडेशन कैसे करते हैं?
स्टैक और डिफ़ॉल्ट साइज़ को पठनीय रखें, फिर एक स्पष्ट मान के लिए फ़ीचर डिटेक्शन या प्रोग्रेसिव एन्हांसमेंट का उपयोग करें। असमर्थित व्यवहार को एक सामान्य ब्राउज़र स्थिति के रूप में मानें, न कि टेक्स्ट को ब्लॉक करने के कारण के रूप में।
फ़ॉन्ट स्वैप को किसी बटन को स्थानांतरित करने से कैसे रोकें?
पर्याप्त स्थान आरक्षित करें, फ़ॉलबैक को कैलिब्रेट करें, और प्राथमिक फ़ॉन्ट आने से पहले और बाद में चौड़ाई मापें। महत्वपूर्ण क्रियाएं छिपे हुए टेक्स्ट या अप्रत्याशित ऑटोसाइज़िंग पर निर्भर नहीं होनी चाहिए।
क्या CJK पेज को समान मान का उपयोग करना चाहिए?
इसे बिना सोचे-समझे पुन: उपयोग न करें। CJK समान लोअरकेस x-height अवधारणा पर मैप नहीं होता है, इसलिए स्थानीय फ़ॉन्ट और line-height नमूनों को स्वतंत्र रूप से सत्यापित करें।
आप कैसे दिखाते हैं कि एक्सेसिबिलिटी को नुकसान नहीं पहुंचा है?
ब्राउज़र ज़ूम, सिस्टम फ़ॉन्ट प्राथमिकताओं, रीफ़्लो के बाद फ़ोकस क्रम, स्क्रीन-रीडर आउटपुट, और हाई कंट्रास्ट का परीक्षण करें। एक फिक्स्ड-पिक्सेल स्क्रीनशॉट पर्याप्त प्रमाण नहीं है।
आप एक इंटरव्यू में ब्राउज़र समर्थन पर कैसे चर्चा करते हैं?
लक्षित ब्राउज़र मैट्रिक्स और एक फ़ीचर-डिटेक्शन योजना दें, जिसमें असमर्थित होने पर एक पठनीय स्टैक शामिल हो। मैट्रिक्स या परीक्षण साक्ष्य के बिना सार्वभौमिक समर्थन का दावा करने से बचें।