सवाल एकाधिक फ़ॉन्ट-भार, एक @ फ़ॉन्ट-फेस क्वेरी


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

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-query, जहां मैं परिभाषित कर रहा हूँ weight प्रश्न में मैं क्वेरी 8 बार कॉपी / चिपकाने से बचना चाहता हूं।

तो कुछ ऐसा है:

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

44
2018-02-02 14:30


मूल


यह 1 फ़ॉन्ट नहीं है ... यह कई फोंट है ... इसलिए दुर्भाग्यवश, मुझे लगता है कि आपको सिर्फ ग्रिन करना होगा और इसे सहन करना होगा। - Paulie_D
हाँ क्षमा करें, यह एक ही परिवार के भीतर अलग-अलग फोंट है। - Rvervuurt
एकाधिक वेबफॉन्ट-फ़ाइलें === अलग-अलग वजन - Eric
यह आलेख मदद कर सकता है: 456bereastreet.com/archive/201012/... वास्तव में यहां एक SO उत्तर है: stackoverflow.com/questions/10045859/... जो उस आलेख का उपयोग करता है, जो आप चाहते हैं उसके विकल्प के लिए एक विकल्प संभव नहीं है। - 97ldave


जवाब:


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

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

@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-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;
}

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


उदाहरण पेन


116
2018-02-05 08:38



यह अच्छा है! इसे इस तरह कार्यान्वित करेगा, क्योंकि अलग-अलग फ़ॉन्ट-नामों के साथ काम करना कभी-कभी भ्रमित हो जाता है, जब मूलभूत बातों में यह वही फ़ॉन्ट होता है। - Rvervuurt
जैसा कि मैंने उपरोक्त मेरी टिप्पणी में सुझाव दिया है ;-) - 97ldave
मेरे मामले में, यह केवल निम्नतम @ फ़ॉन्ट-फेस का उपयोग करता है। वह फ़ॉन्ट-वज़न होगा: बोल्ड; फ़ॉन्ट शैली: इटालिक; हर बार जब मैं फ़ॉन्ट-परिवार का संदर्भ देता हूं: 'DroidSerif'; - Simon Arnold
@rojobuffalo यहाँ है एक उदाहरण कलम, यह उम्मीद की तरह काम कर रहा है। - maioman
@rojobuffalo एक बहुत ही वैध बिंदु बनाता है। पेन इस धारणा की वैधता को सत्यापित करने के लिए कुछ भी नहीं करता है कि यह अपेक्षित व्यवहार करेगा। विशेष रूप से, मैंने सीएसएस उदाहरण से बोल्ड फ़ॉन्ट-फेस घोषणा हटा दी और इसे फिर से चलाया। उपस्थिति समान थी। क्या यह कैश से खींच रहा था? क्या ब्राउज़र बस नियमित फ़ॉन्ट के प्रदर्शित वजन को झुका रहा था? - user314159


@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;
}

1
2018-04-19 19:16



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