एक ही फ़ॉन्ट के लिए एकाधिक फ़ॉन्ट फ़ाइलों को कैसे जोड़ें?

Question

मैं @ फ़ॉन्ट-सीएसएस नियम के लिए एमडीसी पृष्ठ को देख रहा हूं , लेकिन मुझे एक चीज नहीं मिलती। मेरे पास बोल्ड , इटैलिक और बोल्ड + इटैलिक के लिए अलग-अलग फाइलें हैं । मैं एक @font-faceनियम में सभी तीन फ़ाइलों को कैसे एम्बेड कर सकता हूं ? उदाहरण के लिए, अगर मेरे पास:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

ब्राउज़र को पता नहीं होगा कि किस फ़ॉन्ट का उपयोग बोल्ड के लिए किया जाना है (क्योंकि वह फ़ाइल DejaVuSansBold.ttf है), इसलिए यह कुछ ऐसी चीज़ों के लिए डिफ़ॉल्ट होगा जो मैं शायद नहीं चाहता। मैं एक निश्चित फ़ॉन्ट के लिए ब्राउज़र के सभी विभिन्न प्रकारों को कैसे बता सकता हूं?

Comments

इस सवाल के विस्तार के रूप में कि अगर हम WYSIWYG संपादकों जैसे TinyMCE में इन फोंट का उपयोग करते हैं, तो क्या हमें अभी भी बोल्ड इटालिक्स की आवश्यकता है? TinyMCE के बावजूद बोल्ड इटेलिक्स करने के लिए बटोंग्स हैं? मेरे अनुमान का उत्तर एक हाँ है - क्योंकि इन फ़ाइलों के लिए अंतरिम रूप से वे देखते हैं?

— निशांत

फोंट विलय करने

— 2022 बजे user2284570

Answer 1

@font-faceउदाहरण के लिए, कई नियमों को जोड़ने के लिए समाधान प्रतीत होता है :

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

वैसे, ऐसा लगता है कि Google Chrome के बारे में नहीं जानता है format("ttf") तर्क के है, इसलिए आप इसे छोड़ना चाह सकते हैं।

(यह जवाब सीएसएस 2 विनिर्देश के लिए सही था । CSS3 केवल अल्पविराम से अलग की गई सूची के बजाय एक फ़ॉन्ट-शैली की अनुमति देता है।)

Comments

आदेश महत्वपूर्ण है, बोल्ड / इटैलिक शैली अंतिम होनी चाहिए।

— द हू

यह देखते हुए कि यह IE8 (और नीचे) में काम नहीं करता है, भले ही आप ईओटी का उपयोग करें। IE वैकल्पिक टाइपफेस को डाउनलोड करेगा, लेकिन यह इसका उपयोग नहीं करेगा, इसके बजाय यह नियमित टाइपफेस को नकली / बोल्ड करेगा। इसके अलावा, क्रोम 11 एक टाइपफेस को प्रस्तुत करने में विफल रहता है जो बोल्ड और इटैलिक दोनों है

— JaffaTheCake

यह उदाहरण फोंट के लिए एकदम सही काम करता है जिसमें बोल्ड और इटैलिक के लिए एक अलग टीटीएफ फ़ाइल होती है। लेकिन क्या होगा अगर पूरा फ़ॉन्ट एक .ttf फ़ाइल में है और आप बोल्ड का उपयोग करना चाहते हैं, तो यह कैसे काम करता है?

यह लेख यह बताता है कि यह काम क्यों करता है। मुख्य अंश: "ध्यान दें कि फ़ॉन्ट-परिवार की संपत्ति सभी चार फ़ॉन्टों के लिए एक ही नाम है। इसके अलावा, फ़ॉन्ट-शैली और फ़ॉन्ट-वजन का मिलान फ़ॉन्ट क्या है। ध्यान दें: सामान्य वजन सूची के शीर्ष पर होना चाहिए! हमने यह नहीं पाया है कि उसके बाद का आदेश मायने रखता है। "

— जेडी स्मिथ

मुझे एम्बेडेड ब्राउज़र एंड्रॉइड 4.4 पर इस स्निप के साथ परेशानी हो रही थी। सब कुछ ठीक करने के font-style: italic, oblique;लिए बदल font-style: italic;रहा है।

— Xavi

Answer 2

CSS3 के रूप में, कल्पना बदल गई है, केवल एक के लिए अनुमति देता है font-style। एक अल्पविराम से अलग की गई सूची (CSS2 के अनुसार) को ऐसा माना जाएगा जैसे कि वह थी normalऔर किसी भी पहले (डिफ़ॉल्ट) प्रविष्टि को ओवरराइड करती है। यह इस प्रकार परिभाषित फोंट स्थायी रूप से इटैलिक दिखाई देगा।

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

ज्यादातर मामलों में, इटैलिक संभवतः पर्याप्त होगा और तिरछा नियम आवश्यक नहीं होगा यदि आप जो भी उपयोग करने और इसे करने के लिए छड़ी करने को परिभाषित करने का ध्यान रखते हैं।

Comments

मेरा मानना ​​है कि तीसरे और चौथे फोंट को गलत नाम दिया गया है, उनके पास "ओब्लिक" के बजाय "इटैलिक" होना चाहिए।

— नाथन मेरिल

@NathanMerrill ओपी के अनुसार: I have separate files for bold, italic and bold + italic- इसलिए तीन अलग-अलग फाइलें हैं। यह उत्तर उस स्वीकार किए गए एक को सही करता है जो font-style: italic, oblique;अब मान्य नहीं है, लेकिन यह भी कि उत्तर इटैलिक और तिरछा के लिए एक ही फाइल का उपयोग करता है। फिर भी, यह इंगित करने के लायक है कि फ़ाइल दो मामलों में साझा की गई है।

— सिल्ली फ्रीक

Answer 3

फ़ॉन्ट भिन्नता को सही ढंग से काम करने के लिए, मुझे CSS में @ font-face के क्रम को उलट देना पड़ा।

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}

Comments

बहुत उपयोगी। +1

— श्री पॉलीविरल 3

"रिवर्स ऑर्डर" से आपका क्या मतलब है ?

— Nyxynyx

Answer 4

आजकल, 2017/12/17। मैं में फ़ॉन्ट-संपत्ति से आदेश की आवश्यकता के बारे में किसी भी विवरण नहीं मिल रहा है कल्पना । और मैं क्रोम में परीक्षण हमेशा काम करता हूं जो भी आदेश है।

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

Answer 5

यदि आप Google फोंट का उपयोग कर रहे हैं तो मैं निम्नलिखित सुझाव दूंगा।

यदि आप अपने लोकलहोस्ट या सर्वर से फोंट चलाना चाहते हैं तो आपको फाइलें डाउनलोड करनी होंगी।

डाउनलोड लिंक में ttf संकुल को डाउनलोड करने के बजाय, उनके द्वारा दिए गए लाइव लिंक का उपयोग करें, उदाहरण के लिए:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

URL को अपने ब्राउज़र में पेस्ट करें और आपको पहले उत्तर के समान फ़ॉन्ट-फेस घोषणा मिलनी चाहिए।

प्रदान किए गए URL खोलें, फ़ाइलों को डाउनलोड और नाम बदलें।

अपने सीएसएस में woff फ़ाइलों के सापेक्ष पथ के साथ अद्यतन किए गए फ़ॉन्ट-फेस घोषणाओं को चिपकाएं, और आप कर रहे हैं।

Answer 6

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}

Answer 7

यह मत भूलो कि बोल्ड संस्करण के लिए, यह है font-weight; इटैलिक वेरिएंट के लिए, यह हैfont-style

Comments

बहुत समस्या से संबंधित नहीं है और @font-faceइसलिए, मैं इस उत्तर को कम करने की कोशिश कर रहा हूं (लेकिन मैं ऐसा नहीं कर सकता, मेरे पास पर्याप्त प्रतिष्ठा नहीं है)

— फ्रिंजगपैन

हां, यह सवाल का जवाब नहीं है, लेकिन जवाबों को लागू करते समय याद रखने वाली एक अच्छी बात है। समस्या जवाब के टिप्पणी अनुभाग में पहले से ही कई है, इसलिए इस टिप को दफन किया जाएगा

— ओकर

ठीक है, तो मुझे नहीं पता था कि

— FryingggPannn