कई फॉन्ट-वेट, एक @ फॉन्ट-फेस क्वेरी

Question

मुझे Klavika फ़ॉन्ट आयात करना होगा और मैंने इसे कई आकारों और आकारों में प्राप्त किया है:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

अब मैं जानना चाहूंगा कि क्या सीएसएस में उन लोगों को आयात करना संभव है @font-face, जहां मैं weightक्वेरी में परिभाषित कर रहा हूं । मैं प्रश्न 8 बार कॉपी / पेस्ट करने से बचना चाहता हूं।

तो कुछ इस तरह:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

Comments

यह 1 फॉन्ट नहीं है ... यह कई फोंट है ... इसलिए दुर्भाग्य से, मुझे लगता है कि आपको सिर्फ मुस्कराहट और सहन करना होगा।

— पॉलि_ड

हाँ क्षमा करें, यह एक ही परिवार के भीतर अलग-अलग फ़ॉन्ट हैं।

— Rvervuurt

एकाधिक वेबफ़ॉन्ट-फाइलें === अलग-अलग वेट

— एरिक

यह लेख मदद कर सकता है: 456bereastreet.com/archive/201012/… वास्तव में यहाँ एक SO उत्तर है: stackoverflow.com/questions/10045859/… जो उस लेख का उपयोग करता है, जिसे आप चाहते हैं कि आप क्या चाहते हैं, इसका विकल्प नहीं है।

— 97ldave

Answer 1

वास्तव में @ फ़ॉन्ट-चेहरे का एक विशेष स्वाद है जो कि आप जो पूछ रहे हैं, वह अनुमति देगा।

यहाँ अलग-अलग शैलियों के साथ एक ही फ़ॉन्ट-परिवार के नाम का उपयोग विभिन्न शैलियों और भार के साथ किया गया है:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

---

अब आप निर्दिष्ट कर सकते हैं font-weight:boldया font-style:italicआप font-family निर्दिष्ट करने के लिए हो रही है या अधिभावी बिना पसंद के किसी भी तत्व को font-weightऔर font-style।

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

---

इस सुविधा के पूर्ण अवलोकन और मानक उपयोग के लिए इस लेख पर एक नज़र डालें ।

---

उदाहरण कलम

Comments

जैसा कि मैंने ऊपर अपनी टिप्पणी में सुझाव दिया ;-)

— 97ldave

मेरे मामले में, यह केवल सबसे कम @ फॉन्ट-फेस का उपयोग करता है। यह फ़ॉन्ट-भार होगा: बोल्ड; फ़ॉन्ट-शैली: इटैलिक; हर बार मैं फ़ॉन्ट-परिवार का संदर्भ देता हूं: 'DroidSerif';

— साइमन अर्नोल्ड

क्या आपके पास एक परीक्षण है जो साबित करता है कि यह विधि वास्तव में काम कर रही है? आप यह कैसे साबित करेंगे कि ब्राउज़र सही फ़ॉन्ट फ़ाइल को पढ़े बिना केवल वजन या शैली को नहीं रोक रहा है?

— rojobuffalo

@rojobuffalo यहाँ एक उदाहरण कलम है, यह उम्मीद की तरह काम कर रहा है।

— मॉम

@rojobuffalo बहुत मान्य बिंदु बनाता है। कलम दावे की वैधता को सत्यापित करने के लिए कुछ भी नहीं करता है कि यह अपेक्षा के अनुरूप व्यवहार करेगा। विशेष रूप से, मैंने सीएसएस उदाहरण से बोल्ड फॉन्ट-फेस घोषणा को हटा दिया और इसे फिर से चलाया। उपस्थिति समान थी। क्या यह कैश से खींच रहा था? क्या ब्राउज़र केवल नियमित फ़ॉन्ट के प्रदर्शित वजन को कम कर रहा था?

Answer 2

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf) format('truetype') font-weight-normal,
       url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
       url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
}

Comments

कृपया इस बारे में थोड़ा स्पष्टीकरण लिखें कि इससे समस्या क्यों हल होगी। यह एक वाक्य के रूप में कुछ सरल हो सकता है।

— ggderas

पिछले एक के रूप में एक ही समाधान। बस कम अंकन :)

— मिर्का निमेसोवा

मैं इस संकेतन के बारे में कहां पढ़ सकता हूं? इसे MDN

— avalanche1

यह काम नहीं कर रहा है और मुझे कोई संसाधन नहीं मिल रहा है, फिर भी इसमें कुछ सच्चाई है।

— dakab