CSS Font-size

By /

CSS ফন্ট সাইজ

CSS-এ ফন্ট-আকার বৈশিষ্ট্য ফন্টের উচ্চতা এবং আকার নির্দিষ্ট করতে ব্যবহৃত হয়। এটি একটি উপাদানের পাঠ্যের আকারকে প্রভাবিত করে। এর ডিফল্ট মান মাঝারি এবং প্রতিটি উপাদানে প্রয়োগ করা যেতে পারে। এই সম্পত্তির মানগুলির মধ্যে রয়েছে xx-small, small, x-small, ইত্যাদি।

বাক্য গঠন

  1. font-size: medium|large|x-large|xx-large|xx-small|x-small|small|;  

ফন্টের আকার আপেক্ষিক বা পরম হতে পারে।

পরম-আকার

এটি পাঠ্যকে একটি নির্দিষ্ট আকারে সেট করতে ব্যবহৃত হয়। পরম-আকার ব্যবহার করে, সমস্ত ব্রাউজারে পাঠ্যের আকার পরিবর্তন করা সম্ভব নয়। আমরা যখন আউটপুটের শারীরিক আকার জানি তখন এটি সুবিধাজনক।

আপেক্ষিক আকার

এটি প্রতিবেশী উপাদানগুলির সাথে সম্পর্কিত পাঠ্যের আকার সেট করতে ব্যবহৃত হয়। আপেক্ষিক আকারের সাথে, ব্রাউজারগুলিতে পাঠ্যের আকার পরিবর্তন করা সম্ভব।

দ্রষ্টব্য: যদি আমরা একটি ফন্ট-আকার নির্ধারণ না করি, তাহলে সাধারণ পাঠ্য যেমন অনুচ্ছেদের জন্য, ডিফল্ট আকার হল 16px, যা 1em এর সমান।

পিক্সেল সহ ফন্ট সাইজ

যখন আমরা পিক্সেল দিয়ে পাঠ্যের আকার নির্ধারণ করি, তখন এটি আমাদের পাঠ্যের আকারের উপর সম্পূর্ণ নিয়ন্ত্রণ প্রদান করে।

উদাহরণ:

  1. >  
  2. html>  
  3. head>  
  4. style>  
  5.   #first  
  6.   {font-size: 40px;}
  7. #second  
  8.   {font-size: 20px;} 
  9. style>  
  10. head>  
  11. <body>  
  12. <p id=“first”>This is a paragraph having size 40px.p>  
  13. <p id=“second”>This is another paragraph having size 20px.p>   
  14. body>  
  15. html>  

তাদের সাথে ফন্ট সাইজ :

এটি পাঠ্যের আকার পরিবর্তন করতে ব্যবহৃত হয়। বেশিরভাগ বিকাশকারী পিক্সেলের পরিবর্তে এম পছন্দ করে। এটি ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) দ্বারা সুপারিশ করা হয়। উপরে উল্লিখিত হিসাবে, ব্রাউজারে ডিফল্ট পাঠ্যের আকার হল 16px। সুতরাং, আমরা বলতে পারি যে 1em এর ডিফল্ট আকার হল 16px।

পিক্সেল থেকে এম পর্যন্ত আকার গণনা করার সূত্র হল em = pixels/16।

উদাহরণ:

  1. >  
  2. html>  
  3. head>  
  4. style>  
  5.  #first { 
  6.   font-size: 2.5em; /* 40px/16=2.5em */  
  7.   }
  8.   #second {  
  9.   font-size: 1.875em; /* 30px/116=1.875em */  
  10.   }  
  11.   #third {  
  12.   font-size: 0.875em; /* 14px/16=0.875em */  
  13. }  
  14. style>  
  15. head>  
  16. body>  
  17. p id=‘first’>First paragraph.p>  
  18. p id=‘second’>Second paragraphp>  
  19. p id=‘third’>Third Paragraph.p>  
  20. body>  
  21. html>  

প্রতিক্রিয়াশীল ফন্ট আকার

আমরা একটি vw ইউনিট ব্যবহার করে পাঠ্যের আকার নির্ধারণ করতে পারি, যা ‘ভিউপোর্ট প্রস্থ’ বোঝায়। ভিউপোর্ট হল ব্রাউজার উইন্ডোর আকার।

1vw = ভিউপোর্ট প্রস্থের 1%।

যদি ভিউপোর্টের প্রস্থ 50 সেমি হয়, তাহলে 1vw 0.5 সেমি সমান।

উদাহরণ:

  1. >  
  2. html>  
  3. meta name=“viewport” content=“width=device-width, initial-scale=1.0”>  
  4. body>  
  5. p style=“font-size:5vw;”>First paragraph having the width of 5vw.p>  
  6. p style=“font-size:10vw;”>Second paragraph having the width of 10vw.p>  
  7. body>  
  8. html>  

দৈর্ঘ্যের বৈশিষ্ট্য সহ ফন্ট-আকার

এটি ফন্টের আকার দৈর্ঘ্য নির্ধারণ করতে ব্যবহৃত হয়। দৈর্ঘ্য সেমি, px, pt, ইত্যাদি হতে পারে। হরফ-আকারে দৈর্ঘ্যের বৈশিষ্ট্যের নেতিবাচক মান অনুমোদিত নয়।

বাক্য গঠন:

  1. font-size: length;  

উদাহরণ

 
  1. >   
  2. html>   
  3. head>   
  4. style>   
  5.   <.length> {   
  6.  color:red;   
  7.  font-size: 5cm;   
  8.  }   
  9. style>   
  10. head>    
  11. body>   
  12. h1>font-size propertyh1>
  13. p class = “length”>A paragraph having length 5cm.p>   
  14. body>   
  15. html>    


Leave a Comment

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

Scroll to Top