फ़ॉन्ट-वजन - सीएसएस-ट्रिक्स

Anonim

font-weightसंपत्ति एक फ़ॉन्ट की, वजन, या मोटाई सेट और आश्रित या तो एक फ़ॉन्ट परिवार या वजन ब्राउज़र द्वारा परिभाषित के भीतर उपलब्ध फ़ॉन्ट चेहरों पर है।

span ( font-weight: bold; )

font-weightसंपत्ति या तो एक कीवर्ड मूल्य या पूर्वनिर्धारित संख्यात्मक मान स्वीकार करता है। उपलब्ध खोजशब्द हैं:

  • normal
  • bold
  • bolder
  • lighter

उपलब्ध संख्यात्मक मान इस प्रकार हैं:

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

normalसांख्यिक मान के लिए कीवर्ड मूल्य नक्शे 400और करने के लिए मूल्य boldनक्शे 700

400या के अलावा अन्य मानों का उपयोग करके किसी भी प्रभाव को देखने के लिए 700, उपयोग किए जा रहे फ़ॉन्ट में उन अंतर्निहित वज़न से मेल खाने वाले अंतर्निहित चेहरे होने चाहिए।

यदि किसी फ़ॉन्ट में फ़ॉन्ट परिवार के हिस्से के रूप में एक बोल्ड ("700") या सामान्य ("400") संस्करण है, तो ब्राउज़र उसका उपयोग करेगा। यदि वे उपलब्ध नहीं हैं, तो ब्राउज़र फ़ॉन्ट के अपने स्वयं के बोल्ड या सामान्य संस्करण की नकल करेगा। यह अन्य अनुपलब्ध वज़न की नकल नहीं करेगा। किसी भी वैकल्पिक फॉन्ट वेट को पहचानने के लिए फोंट अक्सर "रेगुलर" और "लाइट" जैसे नामों का उपयोग करते हैं।

निम्न डेमो वैकल्पिक वजन मूल्यों के उपयोग को दर्शाता है:

इस पेन को देखें!

उपरोक्त डेमो Google वेब फ़ॉन्ट्स एपीआई का उपयोग करके, स्वतंत्र फ़ॉन्ट ओपन संस का उपयोग कर रहा है। फ़ॉन्ट सभी उपलब्ध फ़ॉन्ट भार के साथ लोड किया जाता है और इसलिए, font-weightसंपत्ति का उपयोग करते हुए , प्रत्येक पैरा के पाठ द्वारा वर्णित विभिन्न उपलब्ध वजन प्रदर्शित किए जाते हैं। अनुपलब्ध वज़न केवल तार्किक रूप से निकटतम वजन प्रदर्शित करता है।

एरियल, हेलवेटिका, जॉर्जिया, आदि जैसे सामान्य फोंट के अलावा 400और वजन नहीं है 700। तो उन फोंट में से एक के साथ प्रदर्शित एक ही डेमो नौ पैराग्राफ में केवल दो वजन प्रदर्शित करेगा।

"फ़ोल्डर" और "लाइटर" कीवर्ड का उपयोग करना

कीवर्ड मान bolderऔर lighterमूल तत्व के संगणित फ़ॉन्ट वजन के सापेक्ष हैं। ब्राउज़र निकटतम "बोल्डर" या "लाइटर" वजन के लिए दिखेगा, जो कि फ़ॉन्ट परिवार में उपलब्ध है, इस पर निर्भर करता है, अन्यथा यह बस "400" या "700" का चयन करेगा, जिसके आधार पर यह सबसे अधिक समझ में आता है।

बाल तत्व "बोल्डर" और "लाइटर" कीवर्ड मानों को इनहेरिट नहीं करेंगे, बल्कि इसके बजाय गणना किए गए वजन को इनहेरिट करेंगे।

ब्राउज़र का समर्थन

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
काम करता है काम करता है काम करता है काम करता है काम करता है काम करता है काम करता है