Google फ़ॉन्ट्स के लिए शैली और वजन निर्दिष्ट करना

Question

मैं अपने कुछ पृष्ठों में Google फ़ॉन्ट का उपयोग कर रहा हूं और फ़ॉन्ट के रूपांतरों का उपयोग करने का प्रयास करते समय एक दीवार से टकराता हूं। उदाहरण: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

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

मैंने फ़ॉन्ट-परिवार के लिए निम्न में से सभी को आजमाया लेकिन कोई पासा नहीं:

• 'ओपन सेन्स बोल्ड'
• 'ओपन सेन्स 700'
• 'ओपन सेन्स बोल्ड 700'
• 'ओपन सेन्स: बोल्ड'

Google डॉक्स स्वयं बहुत मदद नहीं करता है। किसी को भी इस बात का अंदाजा है कि मुझे इन वेरिएंट को प्रदर्शित करने के लिए अपने सीएसएस नियमों को कैसे लिखना चाहिए?

Answer 1

वे नियमित सीएसएस का उपयोग करते हैं।

बस इस तरह अपने नियमित फ़ॉन्ट परिवार का उपयोग करें:

font-family: 'Open Sans', sans-serif;

अब आप तय करते हैं कि फ़ॉन्ट को "वजन" क्या होना चाहिए

अर्द्ध बोल्ड के लिए

font-weight:600;

बोल्ड के लिए (700)

font-weight:bold;

अतिरिक्त बोल्ड के लिए (800)

font-weight:800;

जैसे इसका फ़ॉलबैक प्रूफ, इसलिए यदि Google फॉन्ट को आपके बैकअप फॉन्ट एरियल / हेल्वेटिका (सैंस-सेरिफ़) को "फॉन्ट" करना चाहिए, तो वही फॉन्ट गूगल फॉन्ट की तरह इस्तेमाल होता है।

बहुत बुद्धिमान :-)

ध्यान दें कि हेडर में लिंक फॉन्ट url (google font url के पारिवारिक क्वेरी परम) के माध्यम से अलग-अलग फॉन्ट वेट्स को विशेष रूप से आयात किया जाना है।

उदाहरण के लिए निम्नलिखित लिंक में दोनों वजन 400 और 700 शामिल होंगे:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

Comments

यह आंशिक सत्य है, और यह इसलिए है क्योंकि यदि आप लिंक css पर वजन नहीं उठाते हैं तो Google wont इसे डाउनलोड करने के लिए उचित "बोल्ड" प्रारूप डाउनलोड करता है जिसे आपको "लिंक href" घोषित करना होगा: <लिंक href = ' फ़ॉन्ट्स .com / css? family = Comfortaa: 400,700 'rel =' स्टाइलशीट 'टाइप =' टेक्स्ट / css '>

— ncubica

क्या ब्राउज़र को "बोल्ड" के पुराने नियमों के लिए वजन 600 का उपयोग करने का कोई तरीका है? मुझे लगता है कि 700 बहुत मोटा है और इसे अपनी साइट पर कहीं भी नहीं चाहिए।

— निक कॉटरेल

आपका क्या अर्थ है? मुझे लगता है कि आपको बस बोल्ड को 600 में बदलना चाहिए।? क्या आपका मतलब है "बोल्ड" व्यवहार को बदलना <strong>और <b>?

— मार्को जोहान्सन

मैं @import url ( Fonts.googleapis.com/css?family=Open+Sans:400,300 ) का उपयोग कर रहा हूं ; के रूप में मैं HTML का उपयोग नहीं कर सकता, और जब मैं कोशिश करता हूं और निम्नलिखित का उपयोग करता हूं ... फ़ॉन्ट-परिवार: 'ओपन संस', संस-सेरिफ़; फ़ॉन्ट-वजन: 300; यह फ़ॉन्ट का वजन नहीं बदलता है। विचार?

— टोनी रे टैन्सले

@TonyRayTansley क्या आपके पास CSS फ़ाइल की पहली पंक्ति है? : I

— मार्को

Answer 2

यहाँ समस्या है: आप फ़ॉन्ट वेट निर्दिष्ट नहीं कर सकते जो Google से सेट फ़ॉन्ट में मौजूद नहीं है। फ़ॉन्ट के नीचे SEE SPECIMEN लिंक पर क्लिक करें, फिर नीचे STYLES अनुभाग पर स्क्रॉल करें। आप उस विशेष फ़ॉन्ट के लिए उपलब्ध "शैलियों" में से प्रत्येक देखेंगे। अफसोस की बात है कि Google प्रत्येक शैली के लिए सीएसएस फ़ॉन्ट वज़न को सूचीबद्ध नहीं करता है। यहां बताया गया है कि सीएसएस फ़ॉन्ट वेट नंबरों के नाम कैसे हैं

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Black           900

ध्यान दें कि सभी 9 वज़न में बहुत कम फोंट आते हैं।

Answer 3

font-family:'Open Sans' , sans-serif;

प्रकाश के लिए: font-weight : 100; या font-weight : lighter;

सामान्य के लिए: font-weight : 500; या font-weight : normal;

बोल्ड के लिए: font-weight : 700; या font-weight : bold;

अधिक फ़ोल्डर के लिए: font-weight : 900; या font-weight : bolder;

Comments

महान। लेकिन क्या फॉन्ट-वेट: 100 की तुलना में हल्का हो सकता है?

— जॉन मैक्स

नहीं, न्यूनतम मूल्य केवल 100 है और अधिकतम मूल्य 900 है।

यह सही नहीं है, निम्न मानने वाले हैं: light: font-weight: 300; normal: font-weight: 400; semi-bold: font-weight: 600; bold: font-weight: 700; extra bold: font-weight: 800;

— गेराल्डो

Answer 4

आप Google फ़ॉन्ट्स में निर्दिष्ट वजन मान का उपयोग कर सकते हैं।

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}