ফন্ট প্রোপার্টি কী ? HTML এ ব্যবহৃত ফন্ট এর ফন্ট প্রোপার্টি | বিস্তারিত

ফন্ট প্রোপার্টি কি

আপনি কি জানতে চান ফন্ট প্রোপার্টি কি ? , font-family কি, font-size কি, font-style কি, font-variant কি, font-weight কি, তাহলে এই পোষ্টটি আপনার জন্যই ।

ফন্ট প্রোপার্টি হলো family ( Face) , style ,variant ,weight  এবং size ।

font-family বর্ণের বা ফন্টের চেহারা পরিবর্তন করতে ব্যবহৃত হয় । font-style একটি ফন্ট ইটালিক বা তির্যক করতে ব্যবহৃত । font-variant একটি ছোটহাতের ক্যাপ প্রভাব তৈরি করতে ব্যবহৃত । font-weight দ্বারা কতটা বোল্ড বা হালকা একটি ফন্ট প্রদর্শিত হবে তা করতে ব্যবহৃত হয়। font-size একটি ফন্টের আকার বাড়াতে বা হ্রাস করতে ব্যবহৃত হয় ।

আরও জানুন : ফন্ট প্রোপার্টি কাকে বলে ?

font-family উদাহরণ :

কোড :

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

আউটপুট :

This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.

font-styleউদাহরণ :

কোড :

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

আউটপুট :

This text will be rendered in italic style

font-variant উদাহরণ :

কোড :

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html> 

আউটপুট :

This text will be rendered as small caps

font-weight উদাহরণ :

কোড :


<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html> 

আউটপুট :

This font is bold.

This font is bolder.

This font is 500 weight.

font-size উদাহরণ :

কোড :

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html><html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html> <html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

আউটপুট :

This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.

This font size is 20 pixels

This font size is small

This font size is large

This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.

আরও পড়ুন: 
Bangla নামের অর্থ | 100,001+ শিশুর নামের অর্থ জানুন বাংলা

নামের অর্থ জানতে চান ? নাম দিয়ে এন্টার দিন




Font Property উদাহরণ :

কোড :

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

আউটপুট :

Applying all the properties on the text at once.

Author: drmasud

Leave a Reply

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