फ़ॉन्ट-शैली: इटैलिक बनाम तिरछा सीएसएस में

Question

इन दोनों के बीच क्या अंतर है:

font-style:italic
font-style:oblique

मैंने W3Schools संपादक का उपयोग करने की कोशिश की, लेकिन अंतर बताने में असमर्थ था।

मैं क्या खो रहा हूँ?

Comments

भविष्य का संदेश: विकिपीडिया में एक बहुत अच्छा उदाहरण है जो इटैलिक और तिरछा के बीच का अंतर दर्शाता है ।

— कॉर्न्स्टलक्स

अनुवर्ती अनुवर्ती प्रश्न (या शायद यह UX में जाना चाहिए?): विशेष रूप से तिरछा संस्करण चुनने के लिए एक वास्तविक दुनिया का उपयोग करने वाला मामला क्या होगा? क्या इटैलिक संस्करण "हमेशा" बेहतर नहीं है?

— KlaymenDK

@KlaymenDK: निश्चित रूप से, यह एक संकीर्ण उपयोग का मामला है, लेकिन मैं पिक्सेलेटेड आउटपुट पर कुछ छोटे फ़ॉन्ट आकारों में उपयुक्तता के लिए एक तिरछा फ़ॉन्ट पसंद कर सकता हूं: उदाहरण: एक छोटे फॉर्म-फैक्टर स्क्रीन पर 6pt से 8pt फ़ॉन्ट का उपयोग करना; कुछ इटैलिक रूपों में पतले स्ट्रोक और अधिक गहने होते हैं जो एक साधारण "तिरछा" की तुलना में सुस्ती को कम कर सकते हैं।

— दान एच।

Answer 1

शुद्धतम (प्रकार डिजाइनर) अर्थों में, एक तिरछा एक रोमन फ़ॉन्ट है जिसे एक निश्चित संख्या में डिग्री (8-12 डिग्री, आमतौर पर) तिरछा किया गया है। एक इटैलिक को विशिष्ट वर्णों के साथ टाइप डिजाइनर द्वारा बनाया जाता है (विशेष रूप से लोअरकेस) एक अलग सुलेख बनाने के लिए अलग-अलग तरीके से खींचा जाता है, साथ ही साथ स्लेटेड संस्करण भी।

कुछ प्रकार की ढलाई में मनमाने ढंग से तिरछे चित्र बनाए गए हैं, जो जरूरी नहीं कि डिजाइनर खुद ही अनुमोदित करते हों ... कुछ फोंट का मतलब इटैलिकाइज़ या तिरछा नहीं था ... लेकिन लोगों ने वैसे भी किया। और जैसा कि आप जानते हैं, कुछ ऑपरेटिंग सिस्टम 'इटैलिक' आइकन पर क्लिक करने पर, फॉन्ट को तिरछा करके फ्लाई पर एक तिरछा बना देंगे। सुखद दृश्य नहीं।

केवल इटैलिक निर्दिष्ट करना सबसे अच्छा है जब आप सुनिश्चित हों कि फ़ॉन्ट एक के साथ डिज़ाइन किया गया है।

Comments

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

— सिंगलनएजिनेशन इलिमिनेशन

यह उत्तर कार्यात्मक अंतर, पारस्परिक विशिष्टता, या अर्थ अंतर को संबोधित नहीं करता है।

— अहानिबेक्स्ड

उदाहरण के लिए सिरिलिक फोंट के साथ, इटैलिक वर्ण अक्सर बहुत अलग होंगे, बहुत अधिक सरसकारी रूप की तरह, तिरछा रूप सिर्फ तिरछा होगा।

— मूडी_मडस्किपर

यदि मैं "इटैलिक" कहता हूं तो एक रेंडरिंग इंजन क्या करना चाहिए लेकिन उपलब्ध फ़ॉन्ट का केवल "तिरछा" संस्करण है? या ठीक इसके विपरीत?

— माइकल

@SingleNegationElimination आपकी टिप्पणी का उत्तर होना चाहिए क्योंकि यह विशेष रूप से CSS पर आने पर वास्तविक तकनीकीता को संबोधित करता है। यहां चुना गया "उत्तर" टाइपोग्राफी पर अधिक है।

— वुन-ह्यू वाग

Answer 2

आम तौर पर, एक इटैलिक फ़ॉन्ट का एक विशेष संस्करण है, जबकि एक तिरछा संस्करण बस नियमित संस्करण है जो थोड़ा सा झुका हुआ है। इसलिए दोनों को नियमित फ़ॉन्ट से संबंधित किया गया है, लेकिन एक इटैलिक में विशेष रूप से इसके लिए बने विशेष अक्षर होंगे।

अधिकांश फोंट में या तो एक इटैलिक या एक तिरछा संस्करण है; मैंने कभी ऐसा नहीं देखा, जिसमें दोनों हों। (यदि आपके पास एक इटैलिक संस्करण है, तो एक तिरछा संस्करण क्यों परेशान करता है?)

Answer 3

ओब्लिक प्रकार (या slanted, sloped) एक प्रकार का प्रकार है जो तिरछे प्रकार के समान उपयोग किया जाता है, दाईं ओर थोड़ा तिरछा होता है। इटैलिक प्रकार के विपरीत, हालांकि, यह विभिन्न ग्लिफ़ आकृतियों का उपयोग नहीं करता है; यह विकृत रूप को छोड़कर रोम के प्रकार के समान ग्लिफ़ का उपयोग करता है।

फ्यूचर रीडिंग: सीएसएस फ़ॉन्ट शैली तिरछा बनाम इटैलिक

Answer 4

साथ के रूप में इटैलिक और परोक्ष , एक ही अंतर दिखाई तुलना करते समय है इटैलिक साथ अशुद्ध इटैलिक ।

आप जहां भी सामान्य फ़ॉन्ट तिरछा करते हैं, वहां आपको फॉक्स-इटैलिक्स दिखाई देगा, जबकि एक सच्चा इटैलिक फ़ॉन्ट डिज़ाइन किया जाना है।font-style: italic;

दो के नीचे ll रों शो अंतर स्पष्ट रूप से।

उदाहरण देखें

Comments

क्या आपका मतलब तिरछा-तिरछा होना है?

— जूनक्लाउड

हाँ, अगर न तो एक परोक्ष और न ही एक इटैलिक फ़ॉन्ट परिणाम एक ही (कम से कम इस उदाहरण के लिए क्रोम में) दिखाई देगी उपलब्ध हैं next.plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?preview

— robstarbuck

यह जवाब एक दृश्य सहायता के बिना नहीं किया जा सकता था, धन्यवाद

— मैक्स अलेक्जेंडर हैना

Answer 5

मोज़िला डेवलपर सीएसएस ट्यूटोरियल के अनुसार :

italic: यदि उपलब्ध हो तो फ़ॉन्ट के इटैलिक संस्करण का उपयोग करने के लिए पाठ सेट करता है ; यदि उपलब्ध नहीं है, तो यह तिरछा के साथ इटैलिक अनुकरण करेगा।

तिरछा: पाठ को इटैलिक फ़ॉन्ट के सिम्युलेटेड संस्करण का उपयोग करने के लिए सेट करता है, जो सामान्य संस्करण को तिरछा करके बनाया जाता है।

यहां से, हम यह घटाते हैं कि यदि फ़ॉन्ट का एक इटैलिक संस्करण उपलब्ध नहीं है , तो इटैलिक और तिरछा दोनों समान व्यवहार करते हैं। चूंकि W3Schools कोड स्निपेट कोई विशेष निर्दिष्ट नहीं करता है font-family, मेरा मानना ​​है कि एक डिफ़ॉल्ट फ़ॉन्ट का उपयोग किया जाता है; एक डिफ़ॉल्ट फ़ॉन्ट जिसमें संभवतः इटैलिक संस्करण नहीं है।

लेकिन फ़ॉन्ट का एक इटैलिक संस्करण कैसे उपलब्ध करें?

इसका मतलब है कि हमारे पास एक ही फ़ॉन्ट के कम से कम दो संस्करण हैं, एक "नियमित" एक और एक इटैलिक। इन्हें नियम के <style>साथ अनुभाग में निर्दिष्ट किया जा सकता है @font-face। कृपया संक्षेप में पढ़ें: developer.mozilla , w3schools , tympanus.net । जैसा कि आप देख सकते हैं, फ़ॉन्ट एक फ़ाइल के रूप में लोड किया गया है, जिसमें निम्नलिखित एक्सटेंशन हो सकते हैं eot, otf, woff, truetype:।

अब तक, मुझे फॉन्ट फाइल को लिंक करने के दो तरीके मिले

फ़ॉन्ट फ़ाइल का पूर्ण URL: ( tympanus.net से कोड स्निपेट )

`@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'), 
 url (http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

 @font-face {
 font-family: 'Open Sans';
 font-style: italic;
 font-weight: 400;
 src: local('Open Sans Italic'), local('OpenSans-Italic'), 
 url 
 (http://themes.googleusercontent.com/static/fonts/opensans/v8/
 xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff)
 format('woff');
 }`

कृपया ध्यान दें कि हमारे पास दोनों मामलों में font-family: 'Open Sans', जो मूल रूप से एक ही फ़ॉन्ट को परिभाषित करता है; लेकिन पहले मामले में हमारे पास है font-style: normal;, जबकि दूसरे मामले में हमारे पास है font-style: italic;। यह भी ध्यान दें कि URL विभिन्न फ़ाइलों की ओर इशारा करते हैं। अब, w3schools कोड स्निपेट पर वापस जा रहा है, यही है कि ब्राउज़र कैसे font-style: normalऔर किसके बीच अंतर कर सकता हैfont-style: italic

फ़ॉन्ट फ़ाइल के सापेक्ष पथ का उपयोग करना: ( metaltoad.com से कोड स्निपेट )

प्रत्येक फ़ॉन्ट के लिए अलग-अलग फ़ॉन्ट-पारिवारिक मानों को परिभाषित करने के बजाय, आप प्रत्येक फ़ॉन्ट के लिए एक ही फ़ॉन्ट-परिवार के नाम का उपयोग कर सकते हैं, और मिलान शैलियों को परिभाषित कर सकते हैं, जैसे:

`@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}`

इस स्थिति में, .eotफ़ाइलों को HTML पेज के समान फ़ोल्डर में संग्रहीत किया जाना चाहिए। फिर से, नोटिस करें कि font-familyसमान है, font-styleअलग है, और यह भी कि यूआरएल अलग हैं: Ubuntu- R -webfont बनाम Ubuntu- I -webfont।

फ़ॉन्ट के इटैलिक संस्करण का उदाहरण:

ctan.org : यह एक उदाहरण है कि कैसे एक ही फ़ॉन्ट के विभिन्न शैलियों / भार के लिए अलग-अलग फाइलें प्रदान की जाती हैं। न तो बोल्ड या इटैलिक की गणना मौके पर की जाती है, उन्हें उनकी विशिष्ट फ़ाइल से पुनर्प्राप्त किया जाता है।

Comments

मेरा उत्तर प्रश्न के दूसरे भाग को संबोधित करता है: "... लेकिन अंतर बताने में असमर्थ था। मुझे क्या याद आ रहा है?"

— कोयोट