फ़ॉन्ट-वजन: बहु-फ़ॉन्ट फोंट के लिए फ़ोल्डर

यदि आप कई चेहरों के साथ एक फ़ॉन्ट का उपयोग करते हैं, तो आप संभवतः strong और b टैग चाहते हैं कि फ़ॉन्ट का वजन एक निश्चित font-weight:700 न बढ़े font-weight:700 , जैसा कि डिफ़ॉल्ट रूप से होता है, लेकिन फ़ॉन्ट वजन के आधार पर गणना किए गए मध्यवर्ती मूल्यों का उपयोग करने के लिए मूल तत्व।
यह बहुत सुंदर नहीं है जब strong टैग के अल्ट्रा-पतली फ़ॉन्ट में बोल्ड ब्लॉट दिखाई देते हैं।


उदाहरण के लिए ओपन संस लें।


ओपन सेन्स की पाँच शैलियाँ हैं: लाइट 300, नॉर्मल 400, सेमी-बोल्ड 600, बोल्ड 700 और एक्स्ट्रा-बोल्ड 800।
संख्याएं font-weight मान के अनुरूप हैं।

मुख्य पाठ में स्टाइल लाइट 300, हेडिंग और कोट्स - नॉर्मल 400 और प्रोमो ब्लॉक - सेमी-बोल्ड 600 है।

 body { font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h2, h3, h4, h5, h6, blockquote { font-weight: 400; } .promo { font-weight: 600; } 

strong टैग मुख्य पाठ में, उद्धरणों में और प्रोमो ब्लॉक में दिखाई दे सकता है। इस पर ध्यान दिया जाना चाहिए।

डिफ़ॉल्ट रूप से:

 strong, b { font-weight: bold; /* bold = 700 */ } 

और हम strong और मुख्य टेक्स्ट के लिए नॉर्मल 400, कोट्स और हेडिंग के लिए बोल्ड 700 और प्रोमो ब्लॉक के लिए एक्सट्रा-बोल्ड 800 चाहते हैं। यह बोल्ड और नॉन-बोल्ड टेक्स्ट के बीच कंट्रास्ट को लगभग सभी मामलों में बराबर बनाए रखेगा।

मुझे यकीन है कि कई लोगों ने strong {font-weight: bolder;} का उपयोग करने की कोशिश की है, लेकिन इससे अपेक्षित परिणाम नहीं आए - पाठ अपेक्षा से अधिक मोटा हो गया।

और सभी क्योंकि, विनिर्देश के अनुसार, bolder ( lighter ) मूल्य अगले तालिका के अनुसार, किसी दिए गए फ़ॉन्ट के लिए संभव अगले मूल्य के लिए विरासत में मिला font-weight मान (बढ़ता) घटता है।

विरासत में मिला मूल्य	bolder	लाइटर
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

लेकिन ब्राउज़र सीएसएस strong, b {font-weight: bold;} , अर्थात् कहता है मूल्य "700" विरासत में मिला है , और फिर यह "900" तक भी बढ़ जाता है। इसलिए, ऐसा लगता है कि bolder ठीक से काम नहीं कर रहा है।

आप इसे इस तरह से ठीक कर सकते हैं:

 /*   «bold»,         */ strong, b { font-weight: inherit; } /*  bolder         */ strong, b { font-weight: bolder; } 

जैसे दो अलग नियम। पहला ब्राउजर स्टाइल शीट से font-weight वैल्यू को शून्य पर सेट करता है, दूसरा font-weight को पूर्ण इकाइयों के बजाय सापेक्ष में सेट करता है।

अब हमें नेस्टिंग तत्वों के बारे में चिंता करने की ज़रूरत नहीं है - कैस्केड स्वचालित रूप से सब कुछ करेगा। हम एक दूसरे में strong टैग लगा सकते हैं।


मजबूत टैग लगाए गए। फ़ॉन्ट मोटाई का निर्धारण मूल तत्व के मूल्य के आधार पर किया जाता है।
डेमो

प्रतिबंध

सापेक्ष font-weight मानों का उपयोग करते हुए, हमें क्रमशः bolder और lighter लिए फ़ॉन्ट भार के तीन ग्रेड मिलते हैं। विनिर्देश यह गारंटी नहीं देता है कि ब्राउज़र सही ढंग से चेहरे के नाम और संख्यात्मक मूल्यों से मेल खाएंगे। यह गारंटी नहीं देता है कि फ़ॉन्ट के लिए बोल्ड या महीन शैली है। कुछ फॉन्ट में केवल दो स्टाइल हैं, कुछ में आठ हो सकते हैं।

bolder / lighter का उपयोग करते समय एकमात्र गारंटी यह है कि " bolder " मान वाला फॉन्ट इस फॉन्ट की लाइटर शैलियों की तुलना में अधिक पतला नहीं होगा, और मूल्य " lighter " के साथ यह फॉन्ट की बोल्ड शैलियों से अधिक मोटा नहीं होगा।

फ़ॉन्ट के वजन को ठीक करने के लिए, आपको पूर्ण मूल्यों का उपयोग करना चाहिए।

कीड़े

यदि आपके पास सिस्टम में एक फ़ॉन्ट स्थापित है, लेकिन @font-face माध्यम से कनेक्ट नहीं है, तो Google Chrome केवल सामान्य और बोल्ड फ़ॉन्ट शैली निर्धारित करता है। स्थानीय फ़ॉन्ट को काम करने के लिए, आपको इसके font-family को अतिरिक्त रूप से निर्दिष्ट करना होगा।

 .fw300 { font-family: "Open Sans Light", "Open Sans"; font-weight: 300; } .fw600 { font-family: "Open Sans SemiBold", "Open Sans"; font-weight: 600; }