फ़ॉन्ट से संबंधित CSS गुण

Articles

यह लेख फ़ॉन्ट-संबंधित CSS गुणों की व्याख्या करता है।

आप उपयोग के मामलों के बारे में और font-style और font-family जैसे गुणों को कैसे लिखें, यह सीख सकते हैं।

YouTube Video

पूर्वावलोकन के लिए HTML बनाना

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

टाइपोग्राफी (फ़ॉन्ट संबंधी)

`font-size` गुण

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size एक CSS गुण है जिसका उपयोग किसी तत्व के भीतर पाठ का आकार निर्दिष्ट करने के लिए किया जाता है। इसका उपयोग पाठ के दृश्य महत्व को समायोजित करने और पठनीयता में सुधार करने के लिए किया जाता है। font-size को विभिन्न इकाइयों और विधियों का उपयोग करके निर्दिष्ट किया जा सकता है।

मूल्य निर्दिष्ट करने के मुख्य तरीके

निरपेक्ष मान(px, pt)

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

1p {
2    font-size: 16px;
3}

px: पिक्सेल सबसे आम इकाई हैं। आकार को 1 पिक्सेल की वृद्धि में निर्दिष्ट करें।

1p {
2    font-size: 12pt;
3}

pt: पॉइंट प्रिंटिंग में सामान्यतः उपयोग की जाने वाली इकाइयाँ हैं। 1 पॉइंट 1/72 इंच के बराबर होता है।

सापेक्ष मान(em, rem, %)

आप माता-पिता या रूट तत्व के फ़ॉन्ट आकार के आधार पर रिश्तेदार फ़ॉन्ट आकार भी निर्दिष्ट कर सकते हैं। यह उत्तरदायी डिज़ाइन के लिए उपयुक्त है।

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em एक सापेक्ष इकाई है जो माता-पिता तत्व के फ़ॉन्ट आकार पर आधारित है। यदि माता-पिता का font-size 16px है, तो 1em 16px के बराबर होगा।

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem एक सापेक्ष इकाई है जो रूट तत्व (आमतौर पर <html> तत्व) के फ़ॉन्ट आकार पर आधारित है।

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % को माता-पिता तत्व के फ़ॉन्ट आकार के सापेक्ष एक प्रतिशत के रूप में निर्दिष्ट किया गया है।

कीवर्ड्स

आप उपयोगकर्ता-अनुकूल आकारों को आसानी से निर्दिष्ट करने के लिए कीवर्ड का उपयोग भी कर सकते हैं।

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: ये कीवर्ड बुनियादी फ़ॉन्ट आकार को परिभाषित करते हैं जो ब्राउज़र द्वारा भिन्न होते हैं लेकिन उपयोग में आसान होते हैं।

सापेक्ष कीवर्ड्स

आप माता-पिता तत्व या आसपास के पाठ आकार के संबंध में कीवर्ड का उपयोग करके सापेक्ष फ़ॉन्ट आकार निर्दिष्ट कर सकते हैं।

1p {
2    font-size: larger;
3}

larger: larger फ़ॉन्ट आकार को माता-पिता तत्व से बड़ा बनाता है।

1p {
2    font-size: smaller;
3}

smaller: smaller फ़ॉन्ट आकार को माता-पिता तत्व से छोटा बनाता है।

सामान्य उपयोग के उदाहरण

उत्तरदायी डिज़ाइन में, em और rem का उपयोग अक्सर माता-पिता या रूट तत्वों के आकार के आधार पर लचीले फ़ॉन्ट आकार निर्दिष्ट करने के लिए किया जाता है।
स्थिर डिज़ाइन या सटीक डिज़ाइन में, आकार को तय करने के लिए px का उपयोग सामान्य है।

फ़ॉन्ट आकार समायोजन के उदाहरण

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

निष्कर्ष

font-size पाठ के दृश्य महत्व और पठनीयता को समायोजित करने के लिए एक महत्वपूर्ण गुण है। डिज़ाइन के उद्देश्य के अनुसार या लचीली उत्तरदायी डिज़ाइन के लिए इकाइयों और कीवर्ड का सही ढंग से उपयोग करना महत्वपूर्ण है।

`font-family` विशेषता

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

font-family गुण मुख्य रूप से निम्नलिखित दो प्रकार के मान निर्दिष्ट कर सकता है:।

विशिष्ट फ़ॉन्ट नाम: किसी विशिष्ट फ़ॉन्ट का नाम निर्दिष्ट करें। उन फ़ॉन्ट्स को निर्दिष्ट करें जो सिस्टम पर इंस्टॉल हैं या वेब फ़ॉन्ट्स के रूप में उपलब्ध हैं।
- उदाहरण:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
सामान्य फ़ॉन्ट परिवार: एक फ़ॉलबैक फ़ॉन्ट्स का समूह निर्दिष्ट करें जिसका उपयोग तब किया जाएगा जब विशिष्ट फ़ॉन्ट अनुपलब्ध हो।
- उदाहरण:
  - serif: सेरिफ़ (जैसे, टाइम्स न्यू रोमन, जॉर्जिया)
  - sans-serif: सैन्स-सेरिफ़ (जैसे, एरिअल, वर्डाना)
  - monospace: मोनोस्पेस (जैसे, कुरियर न्यू, लुसिडा कंसोल)
  - cursive: कर्सिव (जैसे, कॉमिक सैन्स एमएस)
  - fantasy: फैंटेसी (जैसे, पैपाइरस, इम्पैक्ट)

`font-family` कैसे निर्दिष्ट करें

कई फ़ॉन्ट निर्दिष्ट करते समय, फ़ॉन्ट नामों को अर्धविराम (कमाज़) से अलग करना और अंत में एक सामान्य फ़ॉन्ट को फ़ॉलबैक के रूप में सूचीबद्ध करना सुझाया जाता है।

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

इस स्थिति में, यदि Times New Roman अनुपलब्ध है, तो Georgia का उपयोग किया जाता है, और यदि दोनों अनुपलब्ध हैं, तो serif फ़ॉन्ट का उपयोग किया जाता है।

`font-weight` विशेषता

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight एक CSS प्रॉपर्टी है जिसका उपयोग टेक्स्ट की मोटाई निर्दिष्ट करने के लिए किया जाता है। यह टेक्स्ट के दृश्य प्रभाव और शैली में महत्वपूर्ण भूमिका निभाता है और फ़ॉन्ट शैली को बदलने के लिए उपयोग किया जाता है। font-weight को संख्या या कीवर्ड्स का उपयोग करके निर्दिष्ट किया जा सकता है, जो पतले से गाढ़े तक की मोटाई का संकेत देता है।

`font-weight` के मुख्य मान

कीवर्ड्स

1p {
2    font-weight: normal; /* Default thickness */
3}

normal सामान्य फ़ॉन्ट वज़न का प्रतिनिधित्व करता है। यह आमतौर पर 400 के अनुरूप होता है।

1p {
2    font-weight: bold; /* Bold */
3}

bold मोटे पाठ का प्रतिनिधित्व करता है। यह आमतौर पर 700 के अनुरूप होता है।

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder उस पाठ का प्रतिनिधित्व करता है जो उसके पेरेंट तत्व से अधिक बोल्ड होता है।

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter उस पाठ का प्रतिनिधित्व करता है जो उसके पेरेंट तत्व से हल्का होता है।

संख्यात्मक मान

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight को एक संख्या के रूप में भी निर्दिष्ट किया जा सकता है, जो 100 से 900 तक होती है। छोटी संख्याएं पतले टेक्स्ट का परिणाम देती हैं, और बड़ी संख्याएं गाढ़े टेक्स्ट का परिणाम देती हैं। आमतौर पर, फ़ॉन्ट परिवार विशिष्ट मोटाई की एक श्रृंखला का समर्थन करते हैं, लेकिन सभी फ़ॉन्ट्स के लिए सभी संख्याएं उपलब्ध नहीं होती हैं।

100: पतला
200: अतिरिक्त पतला
300: हल्का
400: साधारण
500: मध्यम
600: अर्ध गाढ़ा
700: गाढ़ा
800: अतिरिक्त गाढ़ा
900: काला

`font-weight` का उपयोग करने के तरीके के उदाहरण

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

व्यावहारिक उपयोग

मानक टेक्स्ट आमतौर पर 400 (normal) का उपयोग करता है।
हेडिंग्स या जोर देने वाले भागों के लिए, आम तौर पर 700 (bold) का उपयोग किया जाता है।
डिज़ाइन पर निर्भर करते हुए, 500 या 600 जैसे मध्यवर्ती वज़न का उपयोग भी किया जा सकता है ताकि अत्यधिक जोर से बचा जा सके।

सारांश

font-weight एक प्रॉपर्टी है जो टेक्स्ट की मोटाई को निर्दिष्ट करती है, जैसे normal या bold कीवर्ड्स, या 100 से 900 तक की संख्याएं।
lighter और bolder अभिभावक तत्व की मोटाई के सापेक्ष समायोजित होते हैं।
डिज़ाइन और पठनीयता के आधार पर उपयुक्त font-weight का चयन करना महत्वपूर्ण है।

`font-style` प्रॉपर्टी

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style एक CSS प्रॉपर्टी है जिसका उपयोग अक्षरों की शैली निर्दिष्ट करने के लिए किया जाता है, विशेषकर इटैलिक या सामान्य शैली लागू करने के लिए। यह प्रॉपर्टी आमतौर पर टेक्स्ट प्रभाव और डिज़ाइन के लिए उपयोग की जाती है, विशेष रूप से शीर्षकों और उद्धरणों में।

`font-style` के मुख्य मान

`normal`

1p {
2    font-style: normal;
3}

normal मानक वर्ण शैली है (आमतौर पर सीधे अक्षर)।

`italic`

1p {
2    font-style: italic;
3}

italic टेक्स्ट को इटैलिक (झुका हुआ) बनाता है। यदि फ़ॉन्ट परिवार इटैलिक्स का समर्थन करता है, तो इस शैली को लागू किया जा सकता है।

`oblique`

1p {
2    font-style: oblique;
3}

oblique टेक्स्ट को झुका हुआ बनाता है। italic के विपरीत, यदि फ़ॉन्ट में इटैलिक संस्करण नहीं है, तो यह कृत्रिम रूप से टेक्स्ट को झुका सकता है।

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

oblique के साथ एक कोण निर्दिष्ट करें ताकि टेक्स्ट को निर्दिष्ट कोण तक झुकाया जा सके। यह विनिर्देशन oblique को और अनुकूलित करने के लिए है। वर्तमान में, अधिकतर ब्राउज़र कोण विनिर्देशन का समर्थन नहीं करते हैं, लेकिन कुछ करते हैं।

`font-style` का उपयोग

italic का अक्सर जोर देने, उद्धरण और पुस्तक शीर्षकों के लिए उपयोग किया जाता है।
oblique का उपयोग तब किया जाता है जब फॉन्ट में italic स्टाइल शामिल नहीं होता है, और यह कृत्रिम रूप से पाठ को तिरछा करने के लिए उपयोग किया जाता है।
normal का उपयोग सामान्य पाठ शैली पर लौटने के लिए किया जाता है।

सारांश

font-style का उपयोग पाठ के झुकाव को नियंत्रित करने के लिए किया जाता है, जिसमें तीन मुख्य मान हैं: normal, italic, और oblique।
डिज़ाइन में, पाठ पर जोर देने के लिए अक्सर italic का उपयोग किया जाता है, और यदि फॉन्ट इसका समर्थन नहीं करता है, तो पाठ को तिरछा करने के लिए oblique का उपयोग किया जा सकता है।

`color` प्रॉपर्टी

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

color प्रॉपर्टी CSS में पाठ के रंग को निर्दिष्ट करने के लिए एक मौलिक प्रॉपर्टी है। इसका उपयोग HTML तत्वों के पाठ रंग को बदलने के लिए किया जाता है और यह विभिन्न प्रारूपों में रंग निर्दिष्ट कर सकता है।

व्याख्या:

आधुनिक CSS में color-red क्लास का उपयोग कीवर्ड के रूप में लाल रंग निर्दिष्ट करने के लिए किया जाता है।
- आप ऐसे रंग नाम निर्दिष्ट कर सकते हैं जैसे red, blue, green जो कि CSS में परिभाषित हैं।
color-hex क्लास रंगों को हेक्साडेसिमल रंग कोड का उपयोग करके निर्दिष्ट करता है।
- आप 3 अंकों जैसे #F00 के साथ निर्दिष्ट कर सकते हैं। इस मामले में, #F00 #FF0000 के समान रंग है।
color-rgb क्लास रंगों को RGB प्रारूप का उपयोग करके निर्दिष्ट करता है।
- RGB: रेड, ग्रीन और ब्लू घटकों को 0 से 255 के दायरे में निर्दिष्ट करता है।
color-rgba क्लास RGBA प्रारूप का उपयोग करके पारदर्शिता जोड़ता है।
color-hsl क्लास HSL प्रारूप का उपयोग करके रंग निर्दिष्ट करता है।
- रंगों को ह्यू, सैचुरेशन और लाइटनेस के साथ निर्दिष्ट किया जा सकता है। ह्यू को 0 से 360 डिग्री में निर्दिष्ट किया जाता है, और सैचुरेशन तथा लाइटनेस को 0% से 100% में निर्दिष्ट किया जाता है।
color-hsla क्लास पारदर्शिता जोड़ने के लिए HSLA प्रारूप का उपयोग करता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

सीएसएस `@` नियम टेक्स्ट से संबंधित CSS गुण

फ़ॉन्ट से संबंधित CSS गुण

YouTube Video

पूर्वावलोकन के लिए HTML बनाना

टाइपोग्राफी (फ़ॉन्ट संबंधी)

font-size गुण

मूल्य निर्दिष्ट करने के मुख्य तरीके

निरपेक्ष मान(px, pt)

सापेक्ष मान(em, rem, %)

कीवर्ड्स

सापेक्ष कीवर्ड्स

सामान्य उपयोग के उदाहरण

फ़ॉन्ट आकार समायोजन के उदाहरण

निष्कर्ष

font-family विशेषता

font-family कैसे निर्दिष्ट करें

font-weight विशेषता

font-weight के मुख्य मान

कीवर्ड्स

संख्यात्मक मान

font-weight का उपयोग करने के तरीके के उदाहरण

व्यावहारिक उपयोग

सारांश

font-style प्रॉपर्टी

font-style के मुख्य मान

normal

italic

oblique

oblique <angle>

font-style का उपयोग

सारांश

color प्रॉपर्टी

व्याख्या:

YouTube Video

`font-size` गुण

`font-family` विशेषता

`font-family` कैसे निर्दिष्ट करें

`font-weight` विशेषता

`font-weight` के मुख्य मान

`font-weight` का उपयोग करने के तरीके के उदाहरण

`font-style` प्रॉपर्टी

`font-style` के मुख्य मान

`normal`

`italic`

`oblique`

`oblique <angle>`

`font-style` का उपयोग

`color` प्रॉपर्टी