CSS Font

By /

CSS ফন্ট

CSS ফন্ট প্রপার্টি পাঠ্যের চেহারা নিয়ন্ত্রণ করতে ব্যবহৃত হয়। CSS ফন্ট প্রপার্টি ব্যবহার করে আপনি পাঠ্যের আকার, রঙ, শৈলী এবং আরও অনেক কিছু পরিবর্তন করতে পারেন। আপনি ইতিমধ্যেই অধ্যয়ন করেছেন কিভাবে পাঠ্যকে বোল্ড বা আন্ডারলাইন করা যায়। এখানে, আপনি শতাংশ ব্যবহার করে কীভাবে আপনার ফন্টের আকার পরিবর্তন করবেন তাও জানতে পারবেন।

এই কয়েকটি গুরুত্বপূর্ণ ফন্ট বৈশিষ্ট্য:

  1. CSS ফন্টের রঙ: এই বৈশিষ্ট্যটি পাঠ্যের রঙ পরিবর্তন করতে ব্যবহৃত হয়। (স্বতন্ত্র বৈশিষ্ট্য)
  2. CSS ফন্ট পরিবার: এই বৈশিষ্ট্যটি ফন্টের চেহারা পরিবর্তন করতে ব্যবহৃত হয়।
  3. CSS ফন্টের আকার: এই বৈশিষ্ট্যটি ফন্টের আকার বাড়াতে বা কমাতে ব্যবহার করা হয়।
  4. CSS ফন্ট শৈলী: এই বৈশিষ্ট্যটি ফন্টটিকে বোল্ড, তির্যক বা তির্যক করতে ব্যবহার করা হয়।
  5. CSS ফন্ট ভেরিয়েন্ট: এই বৈশিষ্ট্য একটি ছোট-ক্যাপ প্রভাব তৈরি করে।
  6. CSS ফন্টের ওজন: এই বৈশিষ্ট্যটি ফন্টের সাহসীতা এবং হালকাতা বাড়াতে বা হ্রাস করতে ব্যবহৃত হয়।

1) CSS ফন্টের রঙ

CSS ফন্টের রঙ CSS-এ একটি স্বতন্ত্র বৈশিষ্ট্য, যদিও মনে হয় এটি CSS ফন্টের একটি অংশ। এটি পাঠ্যের রঙ পরিবর্তন করতে ব্যবহৃত হয়।

একটি রঙ সংজ্ঞায়িত করার জন্য তিনটি ভিন্ন বিন্যাস আছে:

  • রঙের নামে
  • হেক্সাডেসিমেল মান দ্বারা
  • আরজিবি দ্বারা

উপরের উদাহরণে, আমরা এই সমস্ত বিন্যাস সংজ্ঞায়িত করেছি।

 
  1. <!DOCTYPE html>  
  2. </html>  
  3. </head>  
  4. </style>  
  5. body {  
  6. font-size: 100%;  
  7. }  
  8. h1 { color: red; }  
  9. h2 { color: #9000A1; }   
  10. p { color:rgb(0, 220, 98); }   
  11. }  
  12. </style>  
  13. </head>  
  14. </body>  
  15. <h1>This is heading 1</h1>  
  16. <h2>This is heading 2</h2>  
  17. <p>This is a paragraph.</p>  
  18. </body>  
  19. </html>  

আউটপুট:

This is heading 1

This is heading 2

This is a paragraph.

2) CSS ফন্ট পরিবার

CSS ফন্ট পরিবারকে দুই প্রকারে ভাগ করা যায়:

  • জেনেরিক পরিবার: এতে সেরিফ, সান-সেরিফ এবং মনোস্পেস অন্তর্ভুক্ত রয়েছে।
  • ফন্ট ফ্যামিলি: এটি ফন্ট ফ্যামিলি নাম যেমন Arial, New Times Roman ইত্যাদি নির্দিষ্ট করে।

Serif: Serif ফন্টে অক্ষরের শেষে ছোট লাইন থাকে। সেরিফের উদাহরণ: Times new roman, Georgia ইত্যাদি।

Sans-serif: একটি sans-serif ফন্ট অক্ষরের শেষে ছোট লাইন অন্তর্ভুক্ত করে না। Sans-serif এর উদাহরণ: Arial, Verdana ইত্যাদি।

  1. <!DOCTYPE html>  
  2. </html>  
  3. </head>  
  4. </style>  
  5. body {  
  6. font-size: 100%;  
  7. }  
  8. h1 { font-family: sans-serif; }  
  9. h2 { font-family: serif; }   
  10. p { font-family: monospace; }   
  11. }  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <h1>This heading is shown in sans-serif.</h1>  
  16. <h2>This heading is shown in serif.</h2>  
  17. <p>This paragraph is written in monospace.</p>  
  18. </body>  
  19. </html>  

আউটপুট:

This heading is shown in sans-serif.

This heading is shown in serif.

This paragraph is written in monospace.

3) CSS ফন্ট সাইজ

ফন্টের আকার পরিবর্তন করতে CSS ফন্ট সাইজ প্রপার্টি ব্যবহার করা হয়।

এইগুলি সম্ভাব্য মান যা ফন্টের আকার সেট করতে ব্যবহার করা যেতে পারে:

Font Size Value Description
xx-small অত্যন্ত ছোট টেক্সট আকার প্রদর্শন করতে ব্যবহৃত.
x-small অতিরিক্ত ছোট টেক্সট আকার প্রদর্শন করতে ব্যবহৃত.
small ছোট টেক্সট আকার প্রদর্শন করতে ব্যবহৃত.
medium মাঝারি টেক্সট আকার প্রদর্শন করতে ব্যবহৃত.
large বড় টেক্সট সাইজ প্রদর্শন করতে ব্যবহৃত হয়।
x-large অতিরিক্ত বড় টেক্সট সাইজ প্রদর্শন করতে ব্যবহৃত হয়।
xx-large অত্যন্ত বড় টেক্সট আকার প্রদর্শন করতে ব্যবহৃত.
smaller তুলনামূলকভাবে ছোট পাঠ্যের আকার প্রদর্শন করতে ব্যবহৃত হয়।
larger তুলনামূলকভাবে বড় পাঠ্যের আকার প্রদর্শন করতে ব্যবহৃত হয়।
size in pixels or % শতাংশ বা পিক্সেলে মান সেট করতে ব্যবহৃত হয়।
  1. </html>  
  2. </head>  
  3. <title>Practice CSS font-size property</title>  
  4. </head>  
  5. </body>  
  6. <p style=“font-size:xx-small;”>  This font size is extremely small.</p>    
  7. <p style=“font-size:x-small;”>  This font size is extra small</p>    
  8. <p style=“font-size:small;”>  This font size is small</p>    
  9. <p style=“font-size:medium;”>  This font size is medium. </p>    
  10. <p style=“font-size:large;”>  This font size is large. </p>    
  11. <p style=“font-size:x-large;”>  This font size is extra large. </p>    
  12. <p style=“font-size:xx-large;”>  This font size is extremely large. </p>    
  13. <p style=“font-size:smaller;”>  This font size is smaller. </p>    
  14. <p style=“font-size:larger;”>  This font size is larger. </p>    
  15. <p style=“font-size:200%;”>  This font size is set on 200%. </p>    
  16. <p style=“font-size:20px;”>  This font size is 20 pixels.  </p>    
  17. </body>  
  18. </html>  

আউটপুট:

This font size is extremely small.

This font size is extra small
This font size is small
This font size is medium. 
This font size is large. 
This font size is extra large. 
This font size is extremely large.

This font size is smaller.

This font size is larger. 

This font size is set on 200%. 
This font size is 20 pixels.

4) CSS ফন্ট স্টাইল

CSS ফন্ট স্টাইল প্রপার্টি আপনি কোন ধরনের ফন্ট প্রদর্শন করতে চান তা নির্ধারণ করে। এটি তির্যক, তির্যক বা স্বাভাবিক হতে পারে।

  1. <!DOCTYPE html>  
  2. </html>  
  3. </head>  
  4. </style>  
  5. body {  
  6. font-size: 100%;  
  7. }  
  8. h2 { font-style: italic; }  
  9. h3 { font-style: oblique; }  
  10. h4 { font-style: normal; }   
  11. }  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <h2>This heading is shown in italic font.</h2>  
  16. <h3>This heading is shown in oblique font.</h3>  
  17. <h4>This heading is shown in normal font.</h4>  
  18. </body>  
  19. </html>  

আউটপুট:

This heading is shown in italic font.

This heading is shown in oblique font.

This heading is shown in normal font.

5) CSS ফন্ট ভেরিয়েন্ট

CSS ফন্ট ভেরিয়েন্ট প্রপার্টি নির্দিষ্ট করে কিভাবে একটি এলিমেন্টের ফন্ট ভ্যারিয়েন্ট সেট করতে হয়। এটি স্বাভাবিক এবং ছোট ক্যাপ হতে পারে।

  1. <!DOCTYPE html>  
  2. </html>  
  3. </head>  
  4. </style>  
  5. p { font-variant: small-caps; }  
  6. h3 { font-variant: normal; }  
  7. </style>  
  8. </head>  
  9. <body>  
  10. <h3>This heading is shown in normal font.</h3>  
  11. <p>This paragraph is shown in small font.</p>  
  12. </body>  
  13. </html>  

আউটপুট:

This heading is shown in normal font.

This paragraph is shown in small font.

6) CSS ফন্টের ওজন

CSS ফন্টের ওজন বৈশিষ্ট্য ফন্টের ওজন নির্ধারণ করে এবং একটি ফন্ট কতটা বোল্ড তা উল্লেখ করে। হরফের ওজনের সম্ভাব্য মানগুলি স্বাভাবিক, গাঢ়, গাঢ়, হালকা বা সংখ্যা (100, 200….. 900 পর্যন্ত) হতে পারে।

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <p style=“font-weight:bold;”>This font is bold.</p>  
  5. <p style=“font-weight:bolder;”>This font is bolder.</p>  
  6. <p style=“font-weight:lighter;”>This font is lighter.</p>  
  7. <p style=“font-weight:100;”>This font is 100 weight.</p>  
  8. <p style=“font-weight:200;”>This font is 200 weight.</p>  
  9. <p style=“font-weight:300;”>This font is 300 weight.</p>  
  10. <p style=“font-weight:400;”>This font is 400 weight.</p>  
  11. <p style=“font-weight:500;”>This font is 500 weight.</p>  
  12. <p style=“font-weight:600;”>This font is 600 weight.</p>  
  13. <p style=“font-weight:700;”>This font is 700 weight.</p>  
  14. <p style=“font-weight:800;”>This font is 800 weight.</p>  
  15. <p style=“font-weight:900;”>This font is 900 weight.</p>  
  16. </body>  
  17. </html>  

আউটপুট:

This font is bold.

This font is bolder.

This font is lighter.

This font is 100 weight.

This font is 200 weight.

This font is 300 weight.

This font is 400 weight.

This font is 500 weight.

This font is 600 weight.

This font is 700 weight.

This font is 800 weight.

This font is 900 weight.



Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top