@ फ़ॉन्ट-फेस, फ़ॉन्ट वेरिएंट

Question

यह मेरे फ़ॉन्ट का बोल्ड और बोल्ड संस्करण इस मामले में विभिन्न फ़ॉन्ट प्रकारों का समर्थन करने के लिए मेरा @ फ़ॉन्ट-फेस घोषणा है।

@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: bold; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: bolder; 
} 

अभी मैं क्रोम और फ़ायरफ़ॉक्स के साथ काम कर रहा हूं। क्रोम में सामान्य और बोल्ड वेरिएंट काम करते हैं, लेकिन बोल्ड वेरिएंट नहीं ('बोल्ड' रखता है)। फ़ायरफ़ॉक्स में केवल बोल्ड संस्करण अपेक्षित काम करता है, किसी भी अन्य मामले में बोल्ड संस्करण का उपयोग किया जाता है (यहां तक ​​कि सामान्य वजन के लिए भी)।
क्या यह ज्ञात मुद्दा है या क्या यह घोषणा करने का कोई बेहतर तरीका है?

Answer 1

यहाँ 2 अलग मुद्दे हैं:

1. font-weight कीवर्ड के बजाय संख्यात्मक मान का उपयोग।
2. यदि आवश्यक हो तो IE8 (और पुराने संस्करण) के लिए समर्थन।

कीवर्ड

font-weight कीवर्ड का उपयोग करने के साथ समस्या यह है कि lighter और boldernormal और bold (हमेशा 400 और 700, क्रमशः) की तरह शुद्ध मान नहीं हैं, लेकिन के सापेक्ष हैं प्रकट होता है मूल तत्व (100 हल्का या गहरा) की बहादुरी स्थापित की। lighter और bolder का इलाज करना संभव नहीं है जैसे कि वे पूर्ण मूल्य हैं।

@HTML डेवलपर और @ क्रिस्टोफ ने सुझाव दिया है कि कीवर्ड के बजाय संख्यात्मक मूल्यों का उपयोग करना इसका आसान समाधान है, और स्वयं ही पर्याप्त समाधान हो सकता है (यदि IE8 के लिए समर्थन की आवश्यकता नहीं है)।

@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: 400; 
    font-style: normal; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: 700; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: 900; /* or whatever weight you need to use for "bolder" */ 
} 

IE8 और पहले

कुछ ब्राउज़र प्रदर्शन समस्याएं जब कई वजन या शैलियों ही font-family नाम के साथ जुड़े रहे हैं। (वहाँ दूसरों हो सकता है)

• जब एक से अधिक 1 वजन एक font-family नाम से जुड़ा हुआ है, IE8 प्रदर्शन समस्याएं है  :

  विशिष्ट मुद्दों मैं के बारे में पता कर रहा हूँ।

• जब 4 से अधिक वजन या शैलियों को फ़ॉन्ट-फ़ैमिली नाम से जोड़ा जाता है, तो IE6/7/8 में समस्याएं प्रदर्शित होती हैं।

समाधान प्रत्येक फ़ॉन्ट बदलाव के लिए एक अनूठा font-family नाम का उपयोग करने के लिए है:

@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
} 
@font-face { 
    font-family: "santana-bold"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
} 
@font-face { 
    font-family: "santana-bolder"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
} 

यह दृष्टिकोण आमतौर पर बहुत बढ़िया तरह फॉन्ट सेवाओं द्वारा उपयोग किए। यदि विभिन्न प्रकार के ब्राउज़रों के लिए समर्थन की आवश्यकता है (या कम से कम, विशेष रूप से IE8), तो इसे फोंट एम्बेड करते समय आपको भुगतान करने वाली कीमतों में से एक माना जा सकता है।

Answer 2

फ़ॉन्ट-फेस एकल फ़ॉन्ट में फ़ॉन्ट परिवार के नाम के उद्धरण की आवश्यकता नहीं है। आपको हटाने और चलाने के लिए यह ठीक काम करेगा। font-family: santana; font-weight: 900; एकल फ़ॉन्ट की आवश्यकता नहीं है, इसे केवल एकाधिक फ़ॉन्ट की आवश्यकता है। बोल्डर संख्यात्मक मूल्य के बजाय इसे ठीक काम करना चाहिए।