सीएसएस में फ़ॉन्ट-वजन बनाम बोल्ड फ़ॉन्ट-परिवार सेट करना, जो अधिक सही है?

Question

CSS में फ़ॉन्ट को बोल्ड बनाने के मूल रूप से दो तरीके हैं: font-familyविशेषता के माध्यम से और font-weightविशेषता के माध्यम से ।

मान लीजिए कि मैं उदाहरण के लिए फ़ॉन्ट रेलवे का उपयोग कर रहा हूं और सीएसएस के माध्यम से एक लाइट, एक नियमित, एक सेम्बोल्ड और एक बोल्ड संस्करण लोड किया है। मैं इसे करने के लिए इसे स्थापित करके एक साधारण शीर्षक बोल्ड कर सकता h1{font-family: 'Raleway Bold'}है h1{font-weight: 700}।

इनमें से कौन अधिक सही है, या ये दोनों समान हैं?

Comments

मुझे संदेह है, कि या तो "फ़ॉन्ट-वेट" को css में लिखना सही है, जब आपके पास फ़ॉन्ट परिवार के सभी विकल्प हैं। उदाहरण के लिए: रेलवे फ़ॉन्ट में प्रकाश से लेकर अतिरिक्त बोल्ड तक सभी विकल्प हैं। तो परिवार से सभी फोंट का उपयोग करने के लिए कौन सा तरीका उपयुक्त है, ताकि हम फ़ॉन्ट वर्ण को ढीला न कर सकें।

— पूजा

बहुत संबंधित प्रश्नोत्तर ।

— कै

@ पूजा, मैंने प्रारूपण को स्पष्ट बनाने और वास्तविक प्रश्न को अग्रभूमि में लाने के लिए आपके प्रश्न को संपादित करने की स्वतंत्रता ली है। यदि आपको लगता है कि मैंने अर्थ बदल दिया है, तो आप इसे स्वयं संपादित कर सकते हैं ।

— PieBie

Answer 1

मान लें कि हमने एक बोल्ड फ़ॉन्ट संस्करण लोड किया है जैसे:

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

मैं दोनों का उपयोग कर के पक्ष में तर्क है font-familyऔर font-weightअपनी शैली विनिर्देश में। उदाहरण के लिए:

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

दोनों मूल रूप से एक ही काम करते हैं: अपने शीर्ष 1 को बोल्ड बताएं। यह बोल्डनेस या कुछ भी दोगुना नहीं होगा, यह सिर्फ दोहराता है कि इसे बोल्ड करने की आवश्यकता है।

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

इस छवि में देखें शीर्ष सेट रालवे और रालवे इटैलिक है, लेकिन उचित रेलवे इटैलिक के साथ लोड किया जा रहा है:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

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

Comments

एक परिवार के नाम का उपयोग करना और केवल वजन सेट करना अभी भी फ़ॉन्ट फ़ाइलों के लोड होने के मामले में आपको सही वजन देगा। दोनों का उपयोग करने का एकमात्र कारण संगतता कारणों से होगा।

— कै

आप भ्रमित हैं। आपका Google फॉण्ट उदाहरण केवल रॉलवे इटैलिक को संदर्भित नहीं करता है, जैसा कि font-family: 'Raleway'(ऊपर आपके बोल्ड उदाहरण के विपरीत), लेकिन, इसके अलावा, पूरे परिवार Ralewayया प्रत्येक संस्करण को अलग-अलग फ़ॉन्ट-पारिवारिक नामों के साथ अलग-अलग नाम देने के बावजूद फॉक्स को लागू करने या न करने का कोई असर नहीं है । यहां तक ​​कि आपका अपना उदाहरण यह साबित करता है कि यह एक गलत तरीका है, जैसा कि आपके द्वारा प्रदान font-family: 'Raleway Bold', Helvetica, Arial, sans;किया गया है Helvetica Boldऔर Arial Boldव्यक्तिगत रूप से है क्योंकि यह फ़ॉन्ट वेरिएंट को कैस्केड करने का गलत तरीका है।

— rgthree

Answer 2

जबकि दोनों ही तरीके आपको सही आउटपुट देंगे, और अधिक सही तरीका होगा कि आप एक ही फॉन्ट-फैमिली को वेट और स्टाइल के सभी अलग-अलग वेरिएंट्स को ग्रुप में इस्तेमाल करें। यह उसी तरह है जैसे आप सिस्टम फोंट ('एरियल' से 'sans-serif' तक) का उपयोग करते हैं, और वास्तव में, यदि आप Raleway को लोड करने के लिए Google फोंट का उपयोग करते हैं तो आप सिंगल फॉन्ट परिवार मार्ग का उपयोग करेंगे।

आइए कई कारणों को रेखांकित करें कि यह सही तरीका क्यों है।

यह CSS जटिलता को कम करता है, अंततः, फ़ाइल का आकार

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

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

ध्यान दें कि यह CSS कितना अच्छा और अच्छा है। हमें अपने .ital के लिए "RalewayBold" को फ़ॉन्ट परिवार के रूप में निर्दिष्ट करने की आवश्यकता नहीं है, न ही "RalewayItalic"। वास्तव में, हमें एक बोल्ड और इटैलिक संस्करण भी निर्दिष्ट करने की आवश्यकता नहीं है, क्योंकि हमारी कक्षाएं बस काम करेंगी। इसके अलावा, अगर .bold हमारे .footer के अंदर है, तो यह बोल्ड एरियल होगा न कि रालवे, क्योंकि यह बस एरियल को पाद कंटेनर से विरासत में मिला है।

यह ब्राउज़र का तरीका है।

उपरोक्त अनिवार्य रूप से है कि ब्राउज़र आंतरिक स्टाइलशीट न्यूनतम शैलियों और सीएसएस की अंतर्निहित कैस्केडिंग प्रकृति का उपयोग करके फोंट को कैसे परिभाषित करता है।

यह उद्योग ने जिस तरह से किया है और किया है।

सबसे बड़ी वेब प्रॉपर्टी, एप्लिकेशन और प्रकाशक सभी इसे इस तरह से करते हैं। Google, Facebook, NYT, ESPN, आदि सभी इस तरीके से फोंट को परिभाषित और उपयोग करते हैं।

इतना ही नहीं, लेकिन उपयोगकर्ता सीएसएस या यहां तक ​​कि इंटरनेट से पहले इंटरफेस को भी एक फ़ॉन्ट-परिवारों को निर्दिष्ट करते हैं और वजन और शैली के विभिन्न विनिर्देश के आधार पर वेरिएंट चुनते हैं। Microsoft Word, KeyNote, Google डॉक्स, यहां तक ​​कि 1990 के दशक के पुराने WordPerfect लोड करें और फ़ॉन्ट ड्रॉप-डाउन खोलें; आप फ़ॉन्ट-परिवार का नाम "एरियल" सूचीबद्ध देखेंगे; "एरियल बोल्ड" के बाद "एरियल इटैलिक" आदि के बाद "एरियल" नहीं।

बस Google फ़ॉन्ट्स से लोड करें।

यदि आप Google वेब फ़ॉन्ट्स पर Raleway को मुफ्त webfonts रिपॉजिटरी से लोड करते हैं, तो आप देखेंगे कि Raleway को एक ही परिवार के नाम से परिभाषित किया गया है:

https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}

Comments

क्या यह विधि अशुद्ध लोगों के लिए फ़ॉन्ट शैलियों के बीच भिन्नताओं को अनदेखा नहीं करती है?

— रियान

@ रेयान बिल्कुल नहीं। वास्तव में, फ़ॉन्ट परिवार का नाम (या तो सही ढंग से परिवार को Ralewayवजन / स्टाइल वेरिएंट के साथ बंडल करना , या गलत तरीके से व्यक्तिगत वेरिएंट को परिभाषित करना Raleway Boldऔर Raleway Italicअलग-अलग फ़ॉन्ट-परिवारों के रूप में) का फ़ॉक्स वैरिएशन लागू करने या न करने पर कोई असर नहीं पड़ता है। वास्तव में, एक ही नाम के तहत परिवार को सही ढंग से बंडल करने से ब्राउज़र को अशुद्ध शैली को लागू करने के लिए करीब से बदलाव करने में मदद मिलती है , जबकि प्रत्येक भिन्नता को गलत तरीके से नामित करने से वांछित फ़ॉन्ट लोड नहीं होने पर भिन्नताएं लागू करने के लिए ब्राउज़र को उपलब्ध फोंट के अंधेरे में रखता है।

— rgthree

(1) Google फोंट से बस लोड करें: सुनिश्चित वेबसाइटों के लिए, लेकिन ऐसे कई उदाहरण हैं जहां html / css का उपयोग किया जाता है जहां इंटरनेट कनेक्शन की गारंटी नहीं होती है और आपको स्थानीय रूप से फोंट लोड करना पड़ता है, (2) यह CSS जटिलता को कम करता है एक, अंत में, फ़ाइल का आकार : तो आप किसी साइट या ऐप पर 1 एमबी का शेव करेंगे, जो दर्जनों एमबी का हो, क्लाइंट आपके ऐप के लोड को कितनी तेजी से चकित करेगा, (3) यह उसी तरह है जैसे ब्राउज़र / उद्योग करता है : ब्राउज़र अशुद्ध के लिए डिफ़ॉल्ट है, और वैसे भी 'उद्योग' हमेशा सही नहीं है और न ही यह सर्वोत्तम प्रक्रियाओं का पालन करता है (बस flexbox को देखो)

— PieBie

ब्राउज़रों के लिए डिफ़ॉल्ट क्या है? आप स्पष्ट रूप से नहीं जानते कि आप किस बारे में बात कर रहे हैं। जब आप निर्दिष्ट करते हैं font-family:Arial; font-weight:bold;(जो, फिर से इसे करने का सही तरीका है, भले ही वह एरियल या रालवे हो) क्या आपको लगता है कि ब्राउज़र सामान्य एरियल फ़ॉन्ट चेहरे के लिए एक अशुद्ध बोल्ड आवेदन कर रहा है? गलत। सिस्टम को परिभाषित करने के लिए ब्राउज़र एरियलबोल्ड फ़ॉन्ट चेहरे को लोड कर रहा है और केवल अगर कोई सटीक फ़ॉन्ट उपलब्ध नहीं है, तो यह फ़ॉन्ट-पारिवारिक नाम के आधार पर सबसे अच्छा मिलान फ़ॉन्ट के लिए एक अशुद्ध शैली लागू करेगा, यही कारण है कि वे समान होना चाहिए ! कह नहीं सकता "एरियल के लिए ऐसा करें, लेकिन रालवे नहीं।"

— rgthree

Answer 3

यहाँ बात है, अगर आप Rsseway के बारे में सवाल पूछते हैं, तो css के लिए प्रोग्राम किया गया एक webfont, दोनों तरीके समान रूप से अच्छे हैं। इस स्थिति में फॉन्ट-वेट का उपयोग करें क्योंकि यह "सही" कार्रवाई का कोर्स है जो कोड में बड़े बदलाव के बिना बदलना और नियंत्रित करना सबसे आसान होगा।

अब आप एक बार अपने आप को एक फ़ॉन्ट एम्बेड करने के बाद समस्याएँ शुरू करते हैं, एक फ़ॉन्ट जो जरूरी नहीं है कि सीएसएस के लिए योजना बनाई गई है और भार संख्याओं से मेल नहीं खा सकते हैं।

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

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