The CSS Podcast - 036: Text & Typography
टेक्स्ट, वेब की बुनियादी चीज़ों में से एक है.
वेबसाइट बनाते समय, आपको अपने टेक्स्ट को स्टाइल करने की ज़रूरत नहीं है. एचटीएमएल में, डिफ़ॉल्ट रूप से कुछ स्टाइल मौजूद होती हैं.
हालांकि, आपकी वेबसाइट का ज़्यादातर हिस्सा टेक्स्ट से बना होगा. इसलिए, इसे बेहतर बनाने के लिए कुछ स्टाइल जोड़ना ज़रूरी है. कुछ बुनियादी प्रॉपर्टी में बदलाव करके, अपने उपयोगकर्ताओं के लिए पढ़ने के अनुभव को काफ़ी बेहतर बनाया जा सकता है!
इस मॉड्यूल में, हम @font-face
नियम से शुरू करेंगे. इस नियम की मदद से, अपने वेबपेजों में पसंद के फ़ॉन्ट इंपोर्ट किए जा सकते हैं. इससे यह पक्का होता है कि आपके पास अपनी ज़रूरत के मुताबिक टाइपोग्राफ़ी है, भले ही उपयोगकर्ता ने कोई फ़ॉन्ट इंस्टॉल किया हो.
इसके बाद, हम ज़रूरी सीएसएस फ़ॉन्ट प्रॉपर्टी के बारे में बताएंगे. इनमें font-family
, font-style
, font-weight
, और font-size
शामिल हैं. इन बुनियादी बातों से, टेक्स्ट को स्टाइल और पढ़ने लायक बनाने के लिए, उसमें बदलाव करने का आधार तैयार होता है.
हम पैराग्राफ़ से जुड़ी खास प्रॉपर्टी, जैसे कि text-indent
और
word-spacing
के बारे में भी बताएंगे. इसके बाद, हम वैरिएबल फ़ॉन्ट और स्यूडो-एलिमेंट जैसे बेहतर विषयों पर बात करेंगे. इनसे आपको टाइपोग्राफ़ी पर ज़्यादा कंट्रोल मिलेगा.
इस दौरान, आपको सीएसएस की इन तकनीकों को समझने और लागू करने के लिए, काम के उदाहरण और सलाह दी जाएंगी.
@font-face
नियम
@font-face
सीएसएस at-rule, वेब डिज़ाइन में मददगार होता है. इसकी मदद से, टेक्स्ट दिखाने के लिए कस्टम फ़ॉन्ट तय किए जा सकते हैं और उनका इस्तेमाल किया जा सकता है. @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 का इस्तेमाल किया जाता है.
टाइपफ़ेस बदलना
अपने टेक्स्ट का टाइपफ़ेस बदलने के लिए, font-family
का इस्तेमाल करें.
font-family
प्रॉपर्टी में, कॉमा लगाकर अलग की गई स्ट्रिंग की सूची दी जा सकती है. यह सूची, खास या सामान्य फ़ॉन्ट फ़ैमिली की हो सकती है. खास फ़ॉन्ट फ़ैमिली, कोटेशन मार्क वाली स्ट्रिंग होती हैं. जैसे, "Helvetica", "EB Garamond" या "Times New Roman". जेनरिक फ़ॉन्ट फ़ैमिली, serif
, sans-serif
, और monospace
जैसे कीवर्ड होते हैं. MDN पर विकल्पों की पूरी सूची देखें. ब्राउज़र, दी गई सूची में से पहला उपलब्ध टाइपफ़ेस दिखाएगा.
font-family
का इस्तेमाल करते समय, आपको कम से कम एक सामान्य फ़ॉन्ट फ़ैमिली तय करनी चाहिए. ऐसा इसलिए, ताकि अगर उपयोगकर्ता के ब्राउज़र में आपके पसंदीदा फ़ॉन्ट न हों, तो भी वह आपके कॉन्टेंट को पढ़ सके. आम तौर पर, फ़ॉलबैक के तौर पर इस्तेमाल होने वाली सामान्य फ़ॉन्ट फ़ैमिली, आपकी पसंद के फ़ॉन्ट से मिलती-जुलती होनी चाहिए: अगर font-family: "Helvetica"
(सांस-सेरफ़ फ़ॉन्ट फ़ैमिली) का इस्तेमाल किया जा रहा है, तो फ़ॉलबैक के तौर पर sans-serif
का इस्तेमाल किया जाना चाहिए.
इटैलिक और तिरछे फ़ॉन्ट का इस्तेमाल करना
टेक्स्ट को इटैलिक करना है या नहीं, यह सेट करने के लिए font-style
का इस्तेमाल करें. font-style
इनमें से किसी एक कीवर्ड को स्वीकार करता है: normal
, italic
, और oblique
.
टेक्स्ट को बोल्ड करना
टेक्स्ट को "बोल्ड" करने के लिए, font-weight
का इस्तेमाल करें. यह प्रॉपर्टी, कीवर्ड वैल्यू (normal
, bold
), रिलेटिव कीवर्ड वैल्यू (lighter
, bolder
), और संख्या वाली वैल्यू (100
से 900
) स्वीकार करती है.
कीवर्ड normal
और bold
, संख्या वाली वैल्यू 400
और 700
के बराबर हैं.
कीवर्ड lighter
और bolder
का हिसाब, पैरंट एलिमेंट के हिसाब से लगाया जाता है. इस वैल्यू का पता लगाने का तरीका जानने के लिए, MDN का रिलेटिव वेट का मतलब लेख पढ़ें. इसमें एक आसान चार्ट दिया गया है.
टेक्स्ट का साइज़ बदलना
अपने टेक्स्ट एलिमेंट का साइज़ कंट्रोल करने के लिए, font-size
का इस्तेमाल करें. इस प्रॉपर्टी में लंबाई की वैल्यू, प्रतिशत, और कुछ कीवर्ड वैल्यू स्वीकार की जाती हैं.
लंबाई और प्रतिशत वैल्यू के अलावा, font-size
कुछ एब्सोलूट कीवर्ड वैल्यू (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) और कुछ रिलेटिव कीवर्ड वैल्यू (smaller
, larger
) स्वीकार करता है. रिलेटिव वैल्यू, पैरंट एलिमेंट के font-size
से मिलती-जुलती होती हैं.
लाइनों के बीच की जगह में बदलाव करना
किसी एलिमेंट में हर लाइन की ऊंचाई तय करने के लिए, line-height
का इस्तेमाल करें. यह प्रॉपर्टी, संख्या, लंबाई, प्रतिशत या कीवर्ड normal
को स्वीकार करती है. आम तौर पर, इनहेरिटेंस से जुड़ी समस्याओं से बचने के लिए, लंबाई या प्रतिशत के बजाय संख्या का इस्तेमाल करने का सुझाव दिया जाता है.
वर्णों के बीच का स्पेस बदलना
अपने टेक्स्ट में वर्णों के बीच हॉरिज़ॉन्टल स्पेस को कंट्रोल करने के लिए, letter-spacing
का इस्तेमाल करें. यह प्रॉपर्टी, लंबाई की वैल्यू स्वीकार करती है. जैसे, em
, px
, और rem
.
ध्यान दें कि तय की गई वैल्यू, वर्णों के बीच के स्पेस को बढ़ाती है. नीचे दिए गए डेमो में, किसी एक अक्षर को चुनकर देखें कि उसका लेटरबॉक्स साइज़ क्या है और letter-spacing
के साथ यह कैसे बदलता है.
शब्दों के बीच के स्पेस में बदलाव करना
अपने टेक्स्ट में हर शब्द के बीच के स्पेस को बढ़ाने या घटाने के लिए, 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
.
इन प्रॉपर्टी को क्रम से लगाने का तरीका जानने के लिए, MDN का font
लेख पढ़ें.
टेक्स्ट का केस बदलना
एचटीएमएल में बदलाव किए बिना, अपने टेक्स्ट के कैपिटल लेटर में बदलाव करने के लिए, text-transform
का इस्तेमाल करें. इस प्रॉपर्टी में ये कीवर्ड वैल्यू स्वीकार की जाती हैं: uppercase
, lowercase
, और capitalize
.
टेक्स्ट में अंडरलाइन, ओवरलाइन, और थ्रू-लाइन जोड़ना
अपने टेक्स्ट में लाइनें जोड़ने के लिए, 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
प्रॉपर्टी, ऊपर दी गई सभी प्रॉपर्टी के लिए शॉर्टहैंड है.
अपने टेक्स्ट में इंडेंट जोड़ना
टेक्स्ट के ब्लॉक में इंडेंट जोड़ने के लिए, text-indent
का इस्तेमाल करें. इस प्रॉपर्टी में लंबाई (उदाहरण के लिए, 10px
, 2em
) या उस ब्लॉक की चौड़ाई का प्रतिशत डाला जा सकता है जिसमें यह प्रॉपर्टी मौजूद है.
ओवरफ़्लो या छिपे हुए कॉन्टेंट से जुड़ी समस्या हल करना
छिपाए गए कॉन्टेंट को दिखाने का तरीका बताने के लिए, text-overflow
का इस्तेमाल करें. इसके लिए, दो विकल्प हैं: clip
(डिफ़ॉल्ट), जो ओवरफ़्लो होने पर टेक्स्ट को छोटा कर देता है और ellipsis
, जो ओवरफ़्लो होने पर तीन बिंदु (…) दिखाता है.
व्हाइट-स्पेस कंट्रोल करना
white-space
प्रॉपर्टी का इस्तेमाल यह बताने के लिए किया जाता है कि किसी एलिमेंट में मौजूद खाली जगह को कैसे मैनेज किया जाना चाहिए. ज़्यादा जानकारी के लिए, MDN पर white-space
लेख पढ़ें.
white-space: pre
, ASCII आर्ट या ध्यान से इंडेंट किए गए कोड ब्लॉक को रेंडर करने के लिए काम आ सकता है.
शब्दों को तोड़ने का तरीका कंट्रोल करना
लाइन के ओवरफ़्लो होने पर, शब्दों को "ब्रेक" करने का तरीका बदलने के लिए, word-break
का इस्तेमाल करें. डिफ़ॉल्ट रूप से, ब्राउज़र शब्दों को अलग नहीं करेगा. word-break
के लिए कीवर्ड वैल्यू break-all
का इस्तेमाल करने पर, ब्राउज़र को ज़रूरत पड़ने पर, शब्दों को अलग-अलग वर्णों में बांटने का निर्देश मिलेगा.
टेक्स्ट का अलाइनमेंट बदलना
ब्लॉक या टेबल-सेल एलिमेंट में टेक्स्ट के हॉरिज़ॉन्टल अलाइनमेंट की जानकारी देने के लिए, text-align
का इस्तेमाल करें. इस प्रॉपर्टी में कीवर्ड की वैल्यू left
, right
, start
, end
, center
, justify
, और match-parent
इस्तेमाल की जा सकती हैं.
left
और right
वैल्यू, टेक्स्ट को ब्लॉक के बाएं और दाएं हिस्से पर अलाइन करती हैं.
मौजूदा राइटिंग मोड में, टेक्स्ट की लाइन की शुरुआत और आखिर की जगह दिखाने के लिए, start
और end
का इस्तेमाल करें. इसलिए, start
अंग्रेज़ी में left
और अरेबिक स्क्रिप्ट में right
से मैप होता है, जो दाईं से बाईं (आरटीएल) लिखी जाती है. ये लॉजिकल अलाइनमेंट हैं. इनके बारे में ज़्यादा जानने के लिए, हमारे लॉजिकल प्रॉपर्टी मॉड्यूल पर जाएं.
टेक्स्ट को ब्लॉक के बीच में अलाइन करने के लिए, center
का इस्तेमाल करें.
justify
की वैल्यू, टेक्स्ट को व्यवस्थित करती है और शब्दों के बीच की जगह को अपने-आप बदलती है, ताकि टेक्स्ट ब्लॉक के बाएं और दाएं किनारों के साथ अलाइन हो जाए.
टेक्स्ट की दिशा बदलना
टेक्स्ट की दिशा सेट करने के लिए, direction
का इस्तेमाल करें. इसके लिए, ltr
(बाएं से दाएं, डिफ़ॉल्ट) या rtl
(दाएं से बाएं) में से किसी एक का इस्तेमाल करें. अरबी, हिब्रू या फ़ारसी जैसी कुछ भाषाओं को दाईं से बाईं ओर लिखा जाता है. इसलिए, direction: rtl
का इस्तेमाल किया जाना चाहिए. अंग्रेज़ी और बाएं से दाएं लिखी जाने वाली अन्य सभी भाषाओं के लिए, direction: ltr
का इस्तेमाल करें.
टेक्स्ट का फ़्लो बदलना
टेक्स्ट के फ़्लो और उसके व्यवस्थित होने के तरीके को बदलने के लिए, writing-mode
का इस्तेमाल करें. डिफ़ॉल्ट रूप से, यह horizontal-tb
होता है. हालांकि, जिस टेक्स्ट को हॉरिज़ॉन्टल तौर पर फ़्लो करना है उसके लिए, writing-mode
को vertical-lr
या vertical-rl
पर भी सेट किया जा सकता है.
टेक्स्ट का ओरिएंटेशन बदलना
अपने टेक्स्ट में वर्णों के ओरिएंटेशन की जानकारी देने के लिए, text-orientation
का इस्तेमाल करें. इस प्रॉपर्टी के लिए मान्य वैल्यू mixed
और upright
हैं. इस प्रॉपर्टी का इस्तेमाल सिर्फ़ तब किया जाता है, जब writing-mode
को horizontal-tb
के अलावा किसी अन्य वैल्यू पर सेट किया गया हो.
टेक्स्ट में शैडो जोड़ना
अपने टेक्स्ट में शैडो जोड़ने के लिए, text-shadow
का इस्तेमाल करें. इस प्रॉपर्टी में तीन लंबाई (x-offset
, y-offset
, और blur-radius
) और एक रंग होना चाहिए.
ज़्यादा जानने के लिए, शैडो के बारे में हमारे मॉड्यूल का text-shadow
सेक्शन देखें.
वैरिएबल फ़ॉन्ट
आम तौर पर, "नॉर्मल" फ़ॉन्ट के लिए, टाइपफ़ेस के अलग-अलग वर्शन के लिए अलग-अलग फ़ाइलें इंपोर्ट करनी पड़ती हैं. जैसे, बोल्ड, इटैलिक या कॉन्डेंस्ड. वैरिएबल फ़ॉन्ट ऐसे फ़ॉन्ट होते हैं जिनमें एक फ़ाइल में टाइपफ़ेस के कई अलग-अलग वैरिएंट हो सकते हैं.
ज़्यादा जानकारी के लिए, वैरिएबल फ़ॉन्ट के बारे में हमारा लेख पढ़ें.
स्यूडो-एलिमेंट
::first-letter
और ::first-line
स्यूडो-एलिमेंट
::first-letter
और ::first-line
स्यूडो-एलिमेंट, टेक्स्ट एलिमेंट के पहले अक्षर और पहली लाइन को टारगेट करते हैं.
::selection
स्यूडो-एलिमेंट
उपयोगकर्ता के चुने गए टेक्स्ट का रंग बदलने के लिए, ::selection
स्यूडो-एलिमेंट का इस्तेमाल करें.
इस स्यूडो-एलिमेंट का इस्तेमाल करते समय, सिर्फ़ कुछ सीएसएस प्रॉपर्टी का इस्तेमाल किया जा सकता है: color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
, stroke-width
.
फ़ॉन्ट-विविधता
font-variant
प्रॉपर्टी, कई सीएसएस प्रॉपर्टी का शॉर्टहैंड है. इसकी मदद से, small-caps
और slashed-zero
जैसे फ़ॉन्ट वैरिएंट चुने जा सकते हैं. इस शॉर्टहैंड में शामिल सीएसएस प्रॉपर्टी ये हैं: font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
, और font-variant-numeric
. किसी प्रॉपर्टी के इस्तेमाल के बारे में ज़्यादा जानने के लिए, उस पर दिए गए लिंक देखें.
देखें कि आपको क्या समझ आया
वेब पर टाइपोग्राफ़ी के बारे में अपनी जानकारी की जांच करना
इनमें से कौनसे कीवर्ड का इस्तेमाल, font-family
सामान्य फ़ॉलबैक के तौर पर किया जा सकता है?
sans-serif
serif
monospace
sci-fi
helvetica
italic
हर शब्द के पहले अक्षर को अपरकेस में बदलने के लिए, किस स्टेटमेंट का इस्तेमाल किया जाता है? उदाहरण के लिए, This is a sentence.
➡ This Is A Sentence.
text-case: capitalize;
font-style: capitals;
font-variant: capitalize;
text-transform: capitalize;
text-capitalize: true;
सही या गलत: टेक्स्ट को बाईं, दाईं या बीच में अलाइन करने के लिए, text-orientation
का इस्तेमाल करें.
टेक्स्ट की लाइनों के बीच के स्पेस को बदलने के लिए, सीएसएस की किस प्रॉपर्टी का इस्तेमाल किया जा सकता है?
baseline-distance
line-height
leading
line-spacing
संसाधन
- फ़ॉन्ट इस्तेमाल करने के सबसे सही तरीके लेख में, फ़ॉन्ट इंपोर्ट करने, फ़ॉन्ट रेंडर करने, और वेब पर फ़ॉन्ट इस्तेमाल करने के सबसे सही तरीकों के बारे में बताया गया है.
- MDN पर टेक्स्ट और फ़ॉन्ट स्टाइल के बुनियादी दिशा-निर्देश.