सीएसएस

Question

में एकाधिक @ फ़ॉन्ट-फेस नियमों का उपयोग करें मैं अपने सीएसएस में @font-face नियम का उपयोग कैसे कर सकता हूं?

मैं अपने स्टाइलशीट में इस डाला है:

body { 
    background: #fff url(../images/body-bg-corporate.gif) repeat-x; 
    padding-bottom: 10px; 
    font-family: 'GestaRegular', Arial, Helvetica, sans-serif; 
} 

@font-face { 
    font-family: 'GestaReFogular'; 
    src: url('gestareg-webfont.eot'); 
    src: local('☺'), 
     url('gestareg-webfont.woff') format('woff'), 
     url('gestareg-webfont.ttf') format('truetype'), 
     url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg'); 
} 

यह वर्तमान में केवल साइट पर पाठ के पूरे शरीर के लिए लागू होता है। लेकिन, मैं एक अलग फ़ॉन्ट का उपयोग करने के लिए h1 निर्दिष्ट करना चाहता हूं। मैं यह कैसे कर सकता हूँ?

Answer 1

ध्यान दें, आप भी रुचि हो सकती है:

Custom web font not working in IE9

कौन सा सीएसएस आप नीचे देख के एक और वर्णनात्मक विश्लेषण शामिल है (और तोड़ मरोड़ कि यह IE6-9 पर बेहतर कार्य करने में बताते हैं)।

---

@font-face { 
    font-family: 'Bumble Bee'; 
    src: url('bumblebee-webfont.eot'); 
    src: local('☺'), 
     url('bumblebee-webfont.woff') format('woff'), 
     url('bumblebee-webfont.ttf') format('truetype'), 
     url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg'); 
} 

@font-face { 
    font-family: 'GestaReFogular'; 
    src: url('gestareg-webfont.eot'); 
    src: local('☺'), 
     url('gestareg-webfont.woff') format('woff'), 
     url('gestareg-webfont.ttf') format('truetype'), 
     url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg'); 
} 

body { 
    background: #fff url(../images/body-bg-corporate.gif) repeat-x; 
    padding-bottom: 10px; 
    font-family: 'GestaRegular', Arial, Helvetica, sans-serif; 
} 

h1 { 
    font-family: "Bumble Bee", "Times New Roman", Georgia, Serif; 
} 

---

और अपने अनुवर्ती प्रश्न:

प्र मैं इस तरह के "बुम्बल मधुमक्खी," उदाहरण के लिए के रूप में एक फ़ॉन्ट का उपयोग करना चाहते हैं। उपयोगकर्ता को कंप्यूटर पर उस फ़ॉन्ट को उपलब्ध कराने के लिए मैं @font-face का उपयोग कैसे कर सकता हूं?

ध्यान दें कि मैं क्या आपके बुम्बल मधुमक्खी फ़ॉन्ट या फ़ाइल का नाम है पता नहीं है, तो उसके अनुसार समायोजित, और कहा कि फॉन्ट-फेस घोषणा पूर्व में होना चाहिए (पहले आते हैं) यह के आपके उपयोग, के रूप में मैं ऊपर दिखाया गया है।

प्र मैं अभी भी अन्य @font-face टाइपफेस "GestaRegular" के रूप में अच्छी तरह से उपयोग कर सकते हैं? क्या मैं एक ही स्टाइलशीट में दोनों का उपयोग कर सकता हूं?

बस मुझे उनके उदाहरण में दिखाए गए अनुसार उन्हें एक साथ सूचीबद्ध करें। ऐसा कोई कारण नहीं है कि आप दोनों को घोषित नहीं कर सकते। यह सब @font-face ब्राउज़र को डाउनलोड करने और फ़ॉन्ट-फ़ैमिली उपलब्ध कराने का निर्देश देता है। देखें: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

Answer 2

@font-face { 
    font-family: Kaffeesatz; 
    src: url(YanoneKaffeesatz-Thin.otf); 
    font-weight: 200; 
} 
@font-face { 
    font-family: Kaffeesatz; 
    src: url(YanoneKaffeesatz-Light.otf); 
    font-weight: 300; 
} 
@font-face { 
    font-family: Kaffeesatz; 
    src: url(YanoneKaffeesatz-Regular.otf); 
    font-weight: normal; 
} 
@font-face { 
    font-family: Kaffeesatz; 
    src: url(YanoneKaffeesatz-Bold.otf); 
    font-weight: bold; 
} 
h3, h4, h5, h6 { 
    font-size:2em; 
    margin:0; 
    padding:0; 
    font-family:Kaffeesatz; 
    font-weight:normal; 
} 
h6 { font-weight:200; } 
h5 { font-weight:300; } 
h4 { font-weight:normal; } 
h3 { font-weight:bold; }