टेक्स्ट और टाइपोग्राफ़ी

द सीएसएस पॉडकास्ट - 036: टेक्स्ट और टाइपोग्राफ़ी

टेक्स्ट, वेब के अहम हिस्सों में से एक है.

वेबसाइट बनाते समय, आपको अपने टेक्स्ट को स्टाइल देने की ज़रूरत नहीं होती. एचटीएमएल में असल में कुछ काफ़ी सही डिफ़ॉल्ट स्टाइलिंग होती है.

हालांकि, आपकी वेबसाइट का ज़्यादातर हिस्सा टेक्स्ट से बना होगा. इसलिए, इसे बेहतर बनाने के लिए कुछ स्टाइल जोड़ना ज़रूरी है. कुछ बुनियादी प्रॉपर्टी में बदलाव करके, अपने उपयोगकर्ताओं के लिए पढ़ने के अनुभव को काफ़ी बेहतर बनाया जा सकता है!

इस मॉड्यूल में, हम @font-face नियम से शुरू करेंगे. इस नियम की मदद से, अपने वेबपेजों में पसंद के फ़ॉन्ट इंपोर्ट किए जा सकते हैं. इससे यह पक्का होता है कि आपको वही टाइपोग्राफ़ी मिल रही है जिसकी आपको ज़रूरत है. इससे कोई फ़र्क़ नहीं पड़ता कि उसमें उपयोगकर्ता ने कोई फ़ॉन्ट इस्तेमाल किया है या नहीं.

इसके बाद, हम ज़रूरी सीएसएस फ़ॉन्ट प्रॉपर्टी के बारे में बताएंगे. इनमें font-family, font-style, font-weight, और font-size शामिल हैं. इन बुनियादी बातों से, टेक्स्ट के स्टाइल में बदलाव करने और उसे आसानी से पढ़ने लायक बनाने में मदद मिलती है.

हम वैरिएबल फ़ॉन्ट और स्यूडो-एलिमेंट जैसे बेहतर विषयों के बारे में आखिरी फ़ैसला लेने से पहले, text-indent और word-spacing जैसी पैराग्राफ़ की प्रॉपर्टी के बारे में भी बताएंगे. इन विषयों से टाइपोग्राफ़िक कंट्रोल को बेहतर बनाया जा सकता है.

यहां काम के उदाहरण और सलाह दी जाएंगी, ताकि आप सीएसएस की तकनीकों को बेहतर तरीके से समझ सकें और उन्हें अपना सकें.

@font-face नियम

वेब डिज़ाइन में @font-face सीएसएस का नियम अहम है. इसकी मदद से, टेक्स्ट दिखाने के लिए कस्टम फ़ॉन्ट तय किए जा सकते हैं और उनका इस्तेमाल किया जा सकता है. @font-face की सबसे बड़ी खूबी यह है कि इसे कई तरह से इस्तेमाल किया जा सकता है: इससे किसी रिमोट सर्वर या उपयोगकर्ता के डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट से फ़ॉन्ट सोर्स किए जा सकते हैं.

सिंटैक्स

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

डिस्क्रिप्टर

ascent-override
ऐसेंट मेट्रिक को पसंद के मुताबिक बनाता है. इससे बेसलाइन के ऊपर मौजूद स्पेस पर असर पड़ता है.
descent-override
यह डेसेंट मेट्रिक में बदलाव करता है. इससे बेसलाइन के नीचे मौजूद स्पेस पर असर पड़ता है.
font-display
फ़ॉन्ट के डाउनलोड स्टेटस के आधार पर, फ़ॉन्ट के डिसप्ले के तरीके को कंट्रोल करता है.
font-family
फ़ॉन्ट से जुड़ी प्रॉपर्टी में इस्तेमाल करने के लिए, फ़ॉन्ट का नाम बताता है.
font-stretch
स्वीकार की जा सकने वाली हॉरिज़ॉन्टल स्केलिंग सेट करता है. इसे एक वैल्यू या रेंज के तौर पर तय किया जाता है.
font-style
यह फ़ॉन्ट स्टाइल तय करता है. साथ ही, यह तिरछी स्टाइल के लिए ऐंगल की रेंज के साथ काम करता है.
font-weight
फ़ॉन्ट की मोटाई या उपलब्ध वेट की सीमा को तय करता है.
font-feature-settings
OpenType फ़ॉन्ट सुविधाओं का ऐक्सेस देता है.
font-variation-settings
वैरिएबल फ़ॉन्ट की सेटिंग को बेहतर तरीके से कंट्रोल करने की सुविधा देता है.
line-gap-override
यह फ़ॉन्ट की डिफ़ॉल्ट लाइन गैप को बदल देता है.
size-adjust
फ़ॉन्ट की आउटलाइन और मेट्रिक पर स्केलिंग फ़ैक्टर लागू करता है.
src
इससे फ़ॉन्ट का सोर्स तय होता है. जैसे, स्थानीय या रिमोट. यह @font-face नियम के लिए ज़रूरी है. src में url() और local() को जोड़ना एक सामान्य रणनीति है. इसमें, उपलब्ध होने पर स्थानीय फ़ॉन्ट का इस्तेमाल किया जाता है. फ़ॉलबैक के तौर पर, रिमोट फ़ॉन्ट फ़ाइल पर वापस स्विच किया जाता है. ब्राउज़र, एलान के क्रम के आधार पर संसाधनों को प्राथमिकता देते हैं. इसलिए, आम तौर पर local() को url() से पहले होना चाहिए.
unicode-range
इससे उन वर्णों की सीमा तय होती है जिनके लिए इस फ़ॉन्ट का इस्तेमाल किया जाना चाहिए.

ब्यौरा

@font-face, डिज़ाइनर को "वेब-सेफ़" फ़ॉन्ट की सीमाओं से मुक्त करता है. ऐसा, उन्हें कस्टम टाइपोग्राफ़ी का इस्तेमाल करने की अनुमति देकर किया जाता है. local() फ़ंक्शन की मदद से, उपयोगकर्ता के डिवाइस पर फ़ॉन्ट खोजा जा सकता है. इससे, उपयोगकर्ता को बेहतर अनुभव मिलता है. इसके लिए, इंटरनेट कनेक्शन की ज़रूरत नहीं होती.

फ़ॉन्ट MIME प्रकार

फ़ॉर्मैट MIME टाइप
TrueType font/ttf
OpenType font/otf
वेब ओपन फ़ॉन्ट फ़ॉर्मैट font/woff
वेब ओपन फ़ॉन्ट फ़ॉर्मैट 2 font/woff2

@font-face और font-family के बीच का अंतर

सीएसएस में, @font-face और font-family को अक्सर एक ही समझा जाता है, लेकिन ये दोनों अलग-अलग काम करते हैं.

जैसा कि हमने बताया है, @font-face एक नियम है. इसका इस्तेमाल, अपने वेब ऐप्लिकेशन में इस्तेमाल किए जाने वाले पसंद के मुताबिक फ़ॉन्ट तय करने के लिए किया जाता है. यह ब्राउज़र को बताता है कि फ़ॉन्ट को कहां डाउनलोड करना है, लोड होने के दौरान उसे कैसे दिखाना है (font-display प्रॉपर्टी की मदद से), और यह भी बताता है कि वर्णों का कौनसा सबसेट डाउनलोड करना है (unicode-range की मदद से).

वहीं दूसरी ओर, font-family एक सीएसएस प्रॉपर्टी है. इसका इस्तेमाल सीएसएस नियम के तहत, किसी एलिमेंट के लिए कोई खास फ़ॉन्ट या फ़ॉन्ट की सूची असाइन करने के लिए किया जाता है. font-family में दिए गए फ़ॉन्ट, वेब-सेफ़ फ़ॉन्ट, सिस्टम फ़ॉन्ट या @font-face के साथ तय किए गए कस्टम फ़ॉन्ट हो सकते हैं.

खास जानकारी के लिए, @font-face किसी फ़ॉन्ट का एलान करता है और उसे नाम देता है. साथ ही, font-family एलान किए गए इस फ़ॉन्ट को एचटीएमएल एलिमेंट पर लागू करता है.

यहां दोनों के इस्तेमाल का उदाहरण दिया गया है:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

इस उदाहरण में, @font-face "CustomFont" की जानकारी देता है और ब्राउज़र को बताता है कि उसे कहां खोजना है. इसके बाद, font-family प्रॉपर्टी इसे बॉडी एलिमेंट पर लागू करती है. अगर "CustomFont" उपलब्ध नहीं है, तो फ़ॉलबैक के तौर पर Arial का इस्तेमाल किया जाता है.

टाइपफ़ेस बदलना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • एज: 12.
  • Firefox: 1.
  • Safari: 1.

सोर्स

अपने टेक्स्ट का टाइपफ़ेस बदलने के लिए, font-family का इस्तेमाल करें.

font-family प्रॉपर्टी में, कॉमा लगाकर अलग की गई स्ट्रिंग की सूची दी जा सकती है. यह सूची, खास या सामान्य फ़ॉन्ट फ़ैमिली की हो सकती है. खास फ़ॉन्ट फ़ैमिली, कोटेशन मार्क वाली स्ट्रिंग होती हैं. जैसे, "Helvetica", "EB Garamond" या "Times New Roman". जेनरिक फ़ॉन्ट फ़ैमिली serif, sans-serif, और monospace जैसे कीवर्ड होते हैं (एमडीएन पर विकल्पों की पूरी सूची देखें). ब्राउज़र, दी गई सूची में से पहला उपलब्ध टाइपफ़ेस दिखाएगा.

font-family का इस्तेमाल करते समय, आपको कम से कम एक सामान्य फ़ॉन्ट फ़ैमिली तय करनी चाहिए. ऐसा इसलिए ज़रूरी है, ताकि अगर उपयोगकर्ता के ब्राउज़र में आपके पसंदीदा फ़ॉन्ट न मिलें, तो ऐसा किया जा सकता है. आम तौर पर, फ़ॉलबैक के तौर पर इस्तेमाल होने वाली सामान्य फ़ॉन्ट फ़ैमिली, आपकी पसंद के फ़ॉन्ट से मिलती-जुलती होनी चाहिए: अगर font-family: "Helvetica" (सांस-सेरफ़ फ़ॉन्ट फ़ैमिली) का इस्तेमाल किया जा रहा है, तो फ़ॉलबैक के तौर पर sans-serif का इस्तेमाल किया जाना चाहिए.

इटैलिक और तिरछे फ़ॉन्ट का इस्तेमाल करना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

सोर्स

टेक्स्ट को इटैलिक करना है या नहीं, यह सेट करने के लिए font-style का इस्तेमाल करें. font-style इनमें से किसी एक कीवर्ड को स्वीकार करता है: normal, italic, और oblique.

टेक्स्ट को बोल्ड करना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

सोर्स

टेक्स्ट को "बोल्ड" करने के लिए, font-weight का इस्तेमाल करें. यह प्रॉपर्टी, कीवर्ड वैल्यू (normal, bold), रिलेटिव कीवर्ड वैल्यू (lighter, bolder), और संख्या वाली वैल्यू (100 से 900) स्वीकार करती है.

कीवर्ड normal और bold, संख्या वाली वैल्यू 400 और 700 के बराबर हैं.

कीवर्ड lighter और bolder को पैरंट एलिमेंट के आधार पर कैलकुलेट किया जाता है. इस वैल्यू का पता लगाने का तरीका जानने के लिए, MDN का रिलेटिव वेट का मतलब लेख पढ़ें. इसमें एक आसान चार्ट दिया गया है.

टेक्स्ट का साइज़ बदलना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • एज: 12.
  • फ़ायरफ़ॉक्स: 1.
  • Safari: 1.

सोर्स

अपने टेक्स्ट एलिमेंट का साइज़ कंट्रोल करने के लिए, font-size का इस्तेमाल करें. यह प्रॉपर्टी, लंबाई की वैल्यू, प्रतिशत, और कुछ कीवर्ड वैल्यू स्वीकार करती है.

लंबाई और प्रतिशत वैल्यू के अलावा, font-size कुछ एब्सोलूट कीवर्ड वैल्यू (xx-small, x-small, small, medium, large, x-large, xx-large) और कुछ रिलेटिव कीवर्ड वैल्यू (smaller, larger) स्वीकार करता है. रिलेटिव वैल्यू, पैरंट एलिमेंट के font-size से मिलती-जुलती होती हैं.

लाइनों के बीच के स्पेस में बदलाव करना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • फ़ायरफ़ॉक्स: 1.
  • Safari: 1.

सोर्स

किसी एलिमेंट में हर लाइन की ऊंचाई तय करने के लिए, line-height का इस्तेमाल करें. यह प्रॉपर्टी, संख्या, लंबाई, प्रतिशत या कीवर्ड normal को स्वीकार करती है. आम तौर पर, इनहेरिटेंस से जुड़ी समस्याओं से बचने के लिए, लंबाई या प्रतिशत के बजाय संख्या का इस्तेमाल करने का सुझाव दिया जाता है.

वर्णों के बीच का स्पेस बदलना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • सफ़ारी: 1.

सोर्स

अपने टेक्स्ट में वर्णों के बीच हॉरिज़ॉन्टल स्पेस को कंट्रोल करने के लिए, letter-spacing का इस्तेमाल करें. यह प्रॉपर्टी, लंबाई की वैल्यू स्वीकार करती है. जैसे, em, px, और rem.

ध्यान दें कि तय की गई वैल्यू, वर्णों के बीच के स्पेस को बढ़ाती है. नीचे दिए गए डेमो में, किसी एक अक्षर को चुनकर देखें कि उसका लेटरबॉक्स साइज़ क्या है और letter-spacing के साथ यह कैसे बदलता है.

शब्दों के बीच के स्पेस में बदलाव करना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • एज: 12.
  • Firefox: 1.
  • सफ़ारी: 1.

सोर्स

अपने टेक्स्ट में हर शब्द के बीच के स्पेस को बढ़ाने या घटाने के लिए, word-spacing का इस्तेमाल करें. यह प्रॉपर्टी, लंबाई की वैल्यू स्वीकार करती है. जैसे, em, px, और rem. ध्यान दें कि आपकी तय की गई लंबाई, सामान्य स्पेस के अलावा अतिरिक्त स्पेस के लिए है. इसका मतलब है कि word-spacing: 0, word-spacing: normal के बराबर है.

font शॉर्टहैंड

फ़ॉन्ट से जुड़ी कई प्रॉपर्टी एक साथ सेट करने के लिए, शॉर्टहैंड font प्रॉपर्टी का इस्तेमाल किया जा सकता है. संभावित प्रॉपर्टी की सूची में ये शामिल हैं: font-family, font-size, font-stretch, font-style, font-variant, font-weight, और line-height.

इन प्रॉपर्टी को ऑर्डर करने के तरीके के बारे में जानने के लिए, एमडीएन का font लेख पढ़ें.

टेक्स्ट का केस बदलना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • एज: 12.
  • फ़ायरफ़ॉक्स: 1.
  • Safari: 1.

सोर्स

एचटीएमएल में बदलाव किए बिना, अपने टेक्स्ट के कैपिटल लेटर में बदलाव करने के लिए, text-transform का इस्तेमाल करें. इस प्रॉपर्टी में ये कीवर्ड वैल्यू स्वीकार की जाती हैं: uppercase, lowercase, और capitalize.

टेक्स्ट में अंडरलाइन, ओवरलाइन, और थ्रू-लाइन जोड़ें

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

सोर्स

अपने टेक्स्ट में लाइन जोड़ने के लिए, text-decoration का इस्तेमाल करें. आम तौर पर, टेक्स्ट के नीचे लाइनें जोड़ी जाती हैं. हालांकि, टेक्स्ट के ऊपर या उसके बीच में भी लाइनें जोड़ी जा सकती हैं!

text-decoration प्रॉपर्टी, यहां दी गई ज़्यादा खास प्रॉपर्टी के लिए शॉर्टहैंड है.

text-decoration-line प्रॉपर्टी में underline, overline, और line-through कीवर्ड इस्तेमाल किए जा सकते हैं. एक से ज़्यादा लाइनों के लिए, एक से ज़्यादा कीवर्ड भी दिए जा सकते हैं.

text-decoration-color प्रॉपर्टी, text-decoration-line की सभी सजावटों के लिए रंग सेट करती है.

text-decoration-style प्रॉपर्टी में solid, double, dotted, dashed, और wavy कीवर्ड इस्तेमाल किए जा सकते हैं.

text-decoration-thickness प्रॉपर्टी, किसी भी लंबाई की वैल्यू को स्वीकार करती है. साथ ही, text-decoration-line से सभी डेकोरेशन के लिए स्ट्रोक की चौड़ाई सेट करती है.

text-decoration प्रॉपर्टी, ऊपर दी गई सभी प्रॉपर्टी का शॉर्टहैंड है.

अपने टेक्स्ट में इंडेंट जोड़ना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • फ़ायरफ़ॉक्स: 1.
  • Safari: 1.

सोर्स

अपने टेक्स्ट के ब्लॉक में इंडेंट जोड़ने के लिए, text-indent का इस्तेमाल करें. इस प्रॉपर्टी में लंबाई (उदाहरण के लिए, 10px, 2em) या उस ब्लॉक की चौड़ाई का प्रतिशत डाला जा सकता है जिसमें यह प्रॉपर्टी मौजूद है.

ओवरफ़्लो या छिपे हुए कॉन्टेंट से जुड़ी समस्या हल करना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

सोर्स

छिपाए गए कॉन्टेंट को दिखाने का तरीका बताने के लिए, text-overflow का इस्तेमाल करें. इसके लिए, दो विकल्प हैं: clip (डिफ़ॉल्ट), जो ओवरफ़्लो होने पर टेक्स्ट को छोटा कर देता है और ellipsis, जो ओवरफ़्लो होने पर तीन बिंदु (…) दिखाता है.

व्हाइट-स्पेस कंट्रोल करना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • एज: 12.
  • Firefox: 1.
  • सफ़ारी: 1.

सोर्स

white-space प्रॉपर्टी का इस्तेमाल करके यह तय किया जाता है कि किसी एलिमेंट में मौजूद खाली जगह को कैसे मैनेज किया जाए. ज़्यादा जानकारी के लिए, MDN पर white-space लेख पढ़ें.

white-space: pre, ASCII आर्ट या ध्यान से इंडेंट किए गए कोड ब्लॉक को रेंडर करने के लिए काम आ सकता है.

शब्दों को ब्रेक करने का तरीका कंट्रोल करें

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • एज: 12.
  • Firefox: 15.
  • Safari: 3.

सोर्स

लाइन के ओवरफ़्लो होने पर, शब्दों को "ब्रेक" करने का तरीका बदलने के लिए, word-break का इस्तेमाल करें. डिफ़ॉल्ट रूप से, ब्राउज़र शब्दों को अलग नहीं करेगा. word-break के लिए कीवर्ड वैल्यू break-all का इस्तेमाल करने पर, ब्राउज़र को ज़रूरत पड़ने पर, शब्दों को अलग-अलग वर्णों में बांटने का निर्देश मिलेगा.

टेक्स्ट का अलाइनमेंट बदलना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

सोर्स

ब्लॉक या टेबल-सेल एलिमेंट में टेक्स्ट का हॉरिज़ॉन्टल अलाइनमेंट तय करने के लिए, text-align का इस्तेमाल करें. इस प्रॉपर्टी में कीवर्ड की वैल्यू left, right, start, end, center, justify, और match-parent इस्तेमाल की जा सकती हैं.

left और right वैल्यू, टेक्स्ट को ब्लॉक के बाएं और दाएं हिस्से पर अलाइन करती हैं.

मौजूदा राइटिंग मोड में, टेक्स्ट की लाइन की शुरुआत और आखिर की जगह दिखाने के लिए, start और end का इस्तेमाल करें. इसलिए, start अंग्रेज़ी में left और अरेबिक स्क्रिप्ट में right से मैप होता है, जो दाईं से बाईं (आरटीएल) लिखी जाती है. ये लॉजिकल अलाइनमेंट हैं. इनके बारे में ज़्यादा जानने के लिए, हमारे लॉजिकल प्रॉपर्टी मॉड्यूल पर जाएं.

टेक्स्ट को ब्लॉक के बीच में अलाइन करने के लिए, center का इस्तेमाल करें.

justify की वैल्यू, टेक्स्ट को व्यवस्थित करती है और शब्दों के बीच की जगह को अपने-आप बदलती है, ताकि टेक्स्ट ब्लॉक के बाएं और दाएं किनारों के साथ अलाइन हो जाए.

टेक्स्ट की दिशा बदलना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 2.
  • Edge: 12.
  • फ़ायरफ़ॉक्स: 1.
  • Safari: 1.

सोर्स

अपने टेक्स्ट की दिशा सेट करने के लिए, direction का इस्तेमाल करें. इसके लिए, ltr (बाएं से दाएं, डिफ़ॉल्ट) या rtl (दाएं से बाएं) में से किसी एक को चुनें. अरबी, हिब्रू या फ़ारसी जैसी कुछ भाषाएं दाईं ओर बाईं ओर लिखी जाती हैं, इसलिए direction: rtl का इस्तेमाल किया जाना चाहिए. अंग्रेज़ी और बाएं से दाएं लिखी जाने वाली अन्य सभी भाषाओं के लिए, direction: ltr का इस्तेमाल करें.

टेक्स्ट का फ़्लो बदलना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

सोर्स

टेक्स्ट के फ़्लो और उसके व्यवस्थित होने के तरीके को बदलने के लिए, writing-mode का इस्तेमाल करें. डिफ़ॉल्ट रूप से, यह horizontal-tb होता है. हालांकि, जिस टेक्स्ट को हॉरिज़ॉन्टल तौर पर फ़्लो करना है उसके लिए, writing-mode को vertical-lr या vertical-rl पर भी सेट किया जा सकता है.

टेक्स्ट का ओरिएंटेशन बदलना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

सोर्स

अपने टेक्स्ट में वर्णों के ओरिएंटेशन की जानकारी देने के लिए, text-orientation का इस्तेमाल करें. इस प्रॉपर्टी के लिए मान्य वैल्यू mixed और upright हैं. इस प्रॉपर्टी का इस्तेमाल सिर्फ़ तब किया जाता है, जब writing-mode को horizontal-tb के अलावा किसी अन्य वैल्यू पर सेट किया गया हो.

टेक्स्ट में शैडो जोड़ना

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

सोर्स

अपने टेक्स्ट में शैडो जोड़ने के लिए, text-shadow का इस्तेमाल करें. इस प्रॉपर्टी में तीन लंबाई (x-offset, y-offset, और blur-radius) और एक रंग होना चाहिए.

ज़्यादा जानने के लिए, शैडो के बारे में हमारे मॉड्यूल का text-shadow सेक्शन देखें.

वैरिएबल फ़ॉन्ट

आम तौर पर, "नॉर्मल" फ़ॉन्ट के लिए, टाइपफ़ेस के अलग-अलग वर्शन के लिए अलग-अलग फ़ाइलें इंपोर्ट करनी पड़ती हैं. जैसे, बोल्ड, इटैलिक या कॉन्डेंस्ड. वैरिएबल फ़ॉन्ट ऐसे फ़ॉन्ट होते हैं जिनमें एक फ़ाइल में टाइपफ़ेस के कई अलग-अलग वैरिएंट हो सकते हैं.

Roboto Flex, चौड़ाई और वज़न के अलग-अलग कॉम्बिनेशन में

ज़्यादा जानकारी के लिए, वैरिएबल फ़ॉन्ट के बारे में हमारा लेख पढ़ें.

बदली हुई पहचान वाले एलिमेंट

::first-letter और ::first-line स्यूडो-एलिमेंट

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • एज: 12.
  • Firefox: 1.
  • Safari: 1.

सोर्स

::first-letter और ::first-line स्यूडो-एलिमेंट, टेक्स्ट एलिमेंट के पहले अक्षर और पहली लाइन को टारगेट करते हैं.

::selection स्यूडो-एलिमेंट

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

सोर्स

उपयोगकर्ता के चुने गए टेक्स्ट का रंग बदलने के लिए, ::selection स्यूडो-एलिमेंट का इस्तेमाल करें.

इस फ़र्ज़ी एलिमेंट का इस्तेमाल करते समय, सिर्फ़ कुछ सीएसएस प्रॉपर्टी का इस्तेमाल किया जा सकता है: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

फ़ॉन्ट-विविधता

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

सोर्स

font-variant प्रॉपर्टी, कई सीएसएस प्रॉपर्टी का शॉर्टहैंड है. इसकी मदद से, small-caps और slashed-zero जैसे फ़ॉन्ट के वैरिएंट चुने जा सकते हैं. इस शॉर्टहैंड में शामिल सीएसएस प्रॉपर्टी ये हैं: font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, और font-variant-numeric. किसी प्रॉपर्टी के इस्तेमाल के बारे में ज़्यादा जानने के लिए, उस पर दिए गए लिंक देखें.

देखें कि आपको कितना समझ आया है

वेब पर टाइपोग्राफ़ी के बारे में अपनी जानकारी की जांच करना

इनमें से किन कीवर्ड का इस्तेमाल, font-family के सामान्य फ़ॉलबैक के तौर पर किया जा सकता है?

serif
सही!
monospace
सही!
italic
फिर से कोशिश करें. italic, font-style के लिए मान्य कीवर्ड है, न कि font-family के लिए.
sci-fi
फिर से कोशिश करें. हालांकि, fantasy, font-family के लिए एक मान्य सामान्य फ़ॉलबैक है.
sans-serif
सही!
helvetica
फिर से कोशिश करें. "Helvetica" एक सामान्य कीवर्ड नहीं है, लेकिन यह एक खास फ़ॉन्ट फ़ैमिली से जुड़ा है.

हर शब्द के पहले अक्षर को अपरकेस में बदलने के लिए, किस स्टेटमेंट का इस्तेमाल किया जाता है? उदाहरण के लिए, This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
फिर से कोशिश करें.
text-case: capitalize;
फिर से कोशिश करें.
text-transform: capitalize;
सही!
font-style: capitals;
फिर से कोशिश करें.
font-variant: capitalize;
फिर से कोशिश करें.

सही या गलत: टेक्स्ट को बाईं, दाईं या बीच में अलाइन करने के लिए, text-orientation का इस्तेमाल करें.

सही
फिर से कोशिश करें. text-orientation, किसी लाइन में अक्षरों के रोटेशन को बदलता है.
गलत
सही! text-orientation, किसी लाइन में अक्षरों के रोटेशन को बदलता है. टेक्स्ट को बाईं ओर, दाईं ओर या बीच में अलाइन करने के लिए text-align का इस्तेमाल करें. इसके अलावा, और भी बहुत कुछ!.

टेक्स्ट की लाइनों के बीच के स्पेस को बदलने के लिए, सीएसएस की किस प्रॉपर्टी का इस्तेमाल किया जा सकता है?

line-spacing
फिर से कोशिश करें.
leading
फिर से कोशिश करें. टाइपोग्राफ़ी में लाइनों के बीच के स्पेस के लिए, लीडिंग सही शब्द है. हालांकि, यह सीएसएस प्रॉपर्टी नहीं है.
baseline-distance
फिर से कोशिश करें.
line-height
सही!

संसाधन