ফন্ট সম্পর্কিত 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: পিক্সেল হল সবচেয়ে সাধারণ ইউনিট। আকার বৃদ্ধি করতে ১ পিক্সেল ধাপে নির্ধারণ করুন।

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

pt: পয়েন্ট হল প্রিন্টিংয়ে সাধারণত ব্যবহৃত ইউনিট। ১ পয়েন্ট মানে ১/৭২ ইঞ্চি।

আপেক্ষিক মানগুলি(em, rem, %)

আপনি পিতামাতা বা রুট উপাদানের ফন্ট আকারের উপর ভিত্তি করে আপেক্ষিক ফন্টের আকারও নির্ধারণ করতে পারেন। এটি প্রতিক্রিয়াশীল ডিজাইনের জন্য উপযুক্ত।

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

em: em হল একটি আপেক্ষিক ইউনিট যা পিতামাতা উপাদানের ফন্টের আকারের উপর ভিত্তি করে। যদি পিতামাতা উপাদানের font-size হয় ১৬px, তাহলে ১em সমান হবে ১৬px।

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 মানে স্ট্যান্ডার্ড ফন্ট ওজন। এটি সাধারণত ৪০০ এর সাথে মেলে।

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

bold অর্থ বোল্ড টেক্সট। এটি সাধারণত ৭০০ এর সাথে মেলে।

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: পাতলা
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}

বাস্তবপ্রয়োগিক ব্যবহার

প্রমিত পাঠ্য সাধারণত ৪০০ (normal) ব্যবহার করে।
শিরোনাম বা গুরুত্বারোপিত অংশগুলির জন্য, সাধারণত ৭০০ (bold) ব্যবহার করা হয়।
নকশার উপর নির্ভর করে, ৫০০ বা ৬০০ মতো মধ্যবর্তী ওজনও অত্যধিক গুরুত্ব এড়াতে ব্যবহার করা যেতে পারে।

সারসংক্ষেপ

font-weight একটি প্রপার্টি যা পাঠ্যের পুরুত্ব নির্দেশ করে, যেমন normal বা bold কিওয়ার্ড বা ১০০ থেকে ৯০০ এর মধ্যে সংখ্যা ব্যবহার করে।
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-কে আরও কাস্টমাইজ করতে ব্যবহৃত হয়। বর্তমানে, বেশিরভাগ ব্রাউজার কোণ নির্ধারণ সমর্থন করে না, তবে কিছু করে।

`ফন্ট-স্টাইল` ব্যবহারের নিয়ম

italic সাধারণত জোর দেওয়া, উদ্ধৃতি এবং বইয়ের শিরোনামে ব্যবহৃত হয়।
oblique সাধারণত ব্যবহৃত হয় যখন একটি ফন্টে italic স্টাইল অন্তর্ভুক্ত থাকে না, কৃত্রিমভাবে টেক্সট বাঁকানোর জন্য।
normal সাধারণ টেক্সট স্টাইলে ফিরে যাওয়ার সময় ব্যবহৃত হয়।

সারসংক্ষেপ

font-style টেক্সটের বাঁক নিয়ন্ত্রণ করতে ব্যবহৃত হয়, যার তিনটি প্রধান মান রয়েছে: normal, italic, এবং oblique।
ডিজাইনে, টেক্সট জোর দিতে প্রায়শই italics ব্যবহার করা হয়, এবং যদি ফন্টটি এটি সমর্থন না করে, তবে oblique টেক্সট বাঁকানোর জন্য ব্যবহৃত হতে পারে।

`কালার` প্রপার্টি

 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 উপাদানের টেক্সট রঙ পরিবর্তন করতে ব্যবহৃত হয় এবং বিভিন্ন ফরম্যাটে রঙ নির্ধারণ করতে পারে।

ব্যাখ্যা:

color-red ক্লাস একটি কীওয়ার্ড ব্যবহার করে টেক্সট রঙ লাল হিসাবে নির্ধারণ করে।
- আপনি এমন রঙ নাম নির্ধারণ করতে পারেন যেমন red, blue, green, যা CSS-এ সংজ্ঞায়িত রয়েছে।
color-hex ক্লাস হেক্সাডেসিমাল রঙ কোড ব্যবহার করে রঙ নির্ধারণ করে।
- আপনি #F00 এর মতো ৩ অঙ্কের ব্যবহার করে নির্ধারণ করতে পারেন। এই ক্ষেত্রে, #F00 এবং #FF0000 একই রঙ।
color-rgb ক্লাস RGB ফরম্যাট ব্যবহার করে রঙ নির্ধারণ করে।
- RGB: লাল, সবুজ, এবং নীল উপাদানগুলিকে ০ থেকে ২৫৫ শ্রেণীর মধ্যে নির্ধারণ করে।
color-rgba ক্লাস স্বচ্ছতা যোগ করার জন্য RGBA ফরম্যাট ব্যবহার করে।
color-hsl ক্লাস HSL ফরম্যাট ব্যবহার করে রঙ নির্ধারণ করে।
- হিউ, স্যাচুরেশন, এবং লাইটনেসের মাধ্যমে রঙ নির্ধারণ করা যেতে পারে। হিউ ০ থেকে ৩৬০ ডিগ্রি পর্যন্ত নির্ধারণ করা হয়, এবং স্যাচুরেশন ও লাইটনেস ০% থেকে ১০০% পর্যন্ত নির্ধারণ করা হয়।
color-hsla ক্লাস স্বচ্ছতা যোগ করার জন্য HSLA ফরম্যাট ব্যবহার করে।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

CSS `@` বিধিসমূহ টেক্সট-সম্পর্কিত 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>

ফন্ট-স্টাইল ব্যবহারের নিয়ম

সারসংক্ষেপ

কালার প্রপার্টি

ব্যাখ্যা:

YouTube Video

`font-size` বৈশিষ্ট্য

`font-family` বৈশিষ্ট্য

`font-family` কিভাবে নির্দিষ্ট করবেন

`font-weight` বৈশিষ্ট্য

`font-weight` এর প্রধান মান

`font-weight` ব্যবহারের উদাহরণ

`font-style` প্রপার্টি

`font-style` এর প্রধান মান

`normal`

`italic`

`oblique`

`oblique <angle>`

`ফন্ট-স্টাইল` ব্যবহারের নিয়ম

`কালার` প্রপার্টি