वेब फ़ॉन्ट्स और फॉलबैक फ़ॉन्ट्स

Question

का उपयोग करते हुए web fonts का उपयोग करते समय मैं सोच रहा था कि फ़ॉलबैक फ़ॉन्ट्स का उपयोग करने पर अनुशंसा विधि क्या है?

की तरह, उदाहरण के लिए अगर मैं इस तरह के रूप में, एक वेब फ़ॉन्ट कि बोल्ड था उपयोग कर रहा था:

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url('../fonts/OpenSans-Bold-webfont.eot'); 
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), 
     url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

अब जब आप इस फोन आपको स्पष्ट रूप से सिर्फ इस कार्य करें:

font-family: OpenSansBold; 

हालांकि मैं था फॉलबैक फोंट प्रदान करने के बारे में सोचकर जैसे कि फ़ॉन्ट का डाउनलोड किसी भी कारण से विफल रहता है।

जाहिर है कि .. एक सामान्य शैली फ़ॉन्ट (गैर बोल्ड/गैर-इटैलिक) के रूप में नीचे के साथ क्या करने के लिए आसान काफी है

font-family: OpenSansRegular, Arial; 

हालांकि, क्या मैं सोच रहा हूँ जब फ़ॉन्ट बोल्ड है या के बारे में क्या है इटैलिक।

क्या यह इस तरह की कुछ सलाह दी गई है और यह वेब फ़ॉन्ट को प्रभावित नहीं करेगा?

font-family: OpenSansBold, Arial; 
font-weight: bold; 

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

Answer 1

आप फ़ॉन्ट्सक्वियर द्वारा जेनरेट की गई फ़ॉन्ट फ़ाइलों और एक सीएसएस फ़ाइल का उपयोग कर रहे हैं एल। उनके दृष्टिकोण के साथ समस्या यह है कि प्रत्येक विशिष्ट फ़ॉन्ट (जैसे ओपन सेन्स रेग्युलर और ओपन सन्स बोल्ड) को अलग-अलग फ़ॉन्ट-फ़ैमिली के रूप में दर्शाया जाता है, जिसमें फ़ॉन्ट वजन सामान्य पर सेट होता है।इसका मतलब यह है कि <p>foo <strong>bar</strong> जैसे मार्कअप और p { font-family: Open Sans, Arial } जैसे सरल सीएसएस (ब्राउज़र को डिफ़ॉल्ट strong बोल्ड फ़ॉन्ट वजन में डालने और ओपन सांस परिवार से उपयुक्त फ़ॉन्ट का चयन करने के बजाय), आपको फोंट को स्पष्ट रूप से सेट करने के लिए मजबूर होना होगा। इसका मतलब है कि font-family संपत्ति मूल्य के साथ, फ़ॉन्ट परिवार और फ़ॉन्ट वजन दोनों को सेट करना।

आपको बेहतर दृष्टिकोण प्राप्त करने के लिए सीएसएस को ट्यून करना होगा। आप @font-family शासन में एक ही फ़ॉन्ट परिवार लेकिन अलग अलग वजन का प्रयोग करेंगे, और font-family शासन में, आप केवल परिवार स्थापित करेगा:

@font-face { 
    font-family: 'open_sans'; 
    src: url('opensans-bold-webfont.eot'); 
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-bold-webfont.woff') format('woff'), 
     url('opensans-bold-webfont.ttf') format('truetype'), 
     url('opensans-bold-webfont.svg#OpenSans') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'open_sans'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#OpenSans') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
* { font-family: open_sans, Arial; } 

और फिर आप बस font-weight: bold (या HTML मार्कअप है कि एक इस तरह के प्रयोग करेंगे डिफ़ॉल्ट रूप से प्रभाव, strong, b, th, h1h6 के माध्यम से) उन तत्वों के लिए जो ओपन सन्स बोल्ड में दिखने चाहिए।

ऐसा करने से आप जिस तरह से वर्णन करते हैं, वह अधिकांश ब्राउज़र पर भी काम करता है, लेकिन मैं उस पर भरोसा नहीं करता। एक बार जब आप अपने @font-face में सामान्य वजन के रूप में फ़ॉन्ट घोषित कर लेते हैं, तो उस फ़ॉन्ट में टेक्स्ट पर font-weight: bold सेट करने से एक विफलता हो सकती है, क्योंकि वजन कम नहीं होता है या बी) एल्गोरिदमिक बोल्डिंग के लिए प्रारंभिक बिंदु के रूप में लिया गया फ़ॉन्ट डबल बोल्डिंग में। और अगर मुझे गलत नहीं लगता है, बी) सफारी (विन 7) पर क्या होता है।

Answer 2

आप सही ढंग से वेब फोंट की 'नए युग' के साथ एक समस्या पर प्रकाश डाला गया है, इस ब्लॉग पोस्ट यह चर्चा करता है और एक समाधान http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/

प्रासंगिक टुकड़ा प्रस्तुत

समस्या नंबर दो की तुलना में काफी बड़ा है सबसे पहला। एफएफ इंजो पर विचार करें, जिसमें 400 (या यहां तक ​​कि 500) वजन नहीं है। कुछ परिस्थितियों में, इसका हल्का (300) वजन शायद छोटे शरीर के प्रकार के लिए थोड़ा पतला हो सकता है, तो चलिए 600 वजन का उपयोग करें। आह, यह ठीक दिखता है।

लेकिन यह ठीक नहीं है! क्योंकि अगर वह फ़ॉन्ट प्रदर्शित नहीं किया जा सकता है और हम किसी और चीज़ पर फ़ॉलबैक करते हैं, तो फ़ॉलबैक फ़ॉन्ट 600 वजन पर प्रस्तुत करेगा; दूसरे शब्दों में: बोल्ड।

एक कामकाज?

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

सीएसएस कोड:

{ font-family: 'FamilyName Light', 'FallbackFamily', serif; font-weight: normal; } 
{ font-family: 'FamilyName Medium', 'FallbackFamily', serif; font-weight: normal; } 
{ font-family: 'FamilyName Bold', 'FallbackFamily', serif; font-weight: bold; } 
{ font-family: 'FamilyName Black', 'FallbackFamily', serif; font-weight: bold; } 

अद्यतन:

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url('../fonts/OpenSans-Bold-webfont.eot'); 
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), 
     url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

और फिर कुछ की तरह (के रूप में आप का सुझाव दिया):

{ font-family: OpenSansBold, 'Arial'; font-weight: bold; }