اندازه فونت (font-size)

ویژگی font-size اندازه متن را تعیین می کند.

توانایی مدیریت اندازه متن در طراحی وب از اهمیت بالایی برخوردار است. با این وجود ، شما نباید از تنظیمات اندازه قلم استفاده کنید تا پاراگراف ها مانند سر فصل ها را بزرگ نشان دهید، یا عنوان ها را مانند پاراگراف ها .

همیشه از برچسب های مناسب HTML مانند <h1> - <h6> برای عناوین و <p> برای پاراگراف ها استفاده کنید.

اندازه قلم یا فونت می تواند یک اندازه مطلق یا نسبی باشد.

توجه: اگر اندازه فونت را مشخص نکردید ، اندازه پیش فرض برای متن عادی مانند پاراگراف ها 16px است (16px = 1em).


تعیین اندازه قلم با پیکسل (px)

تنظیم اندازه متن با پیکسل به شما امکان کنترل کامل روی اندازه متن را می دهد:

 h1 {
  font-size: 40px;
}
 h2 {
  font-size: 30px;
}
 p {
  font-size: 14px;
}

تعیین اندازه فونت با Em

برای اینکه کاربران بتوانند متن را تغییر اندازه دهند (در منوی مرورگر) ، بسیاری از توسعه دهندگان از em به جای پیکسل ها استفاده می کنند.
واحد اندازه em توسط W3C توصیه می شود.
1em با اندازه فونت فعلی برابر است. اندازه پیش فرض متن در مرورگرها 16px است. بنابراین ، اندازه پیش فرض 1em=16px است.
اندازه را می توان از پیکسل تا em با استفاده از این فرمول محاسبه کرد: pixel / 16 = em

 h1 {
   font-size: 2.5em; /* 40px/16=2.5em */
 }
 
 h2 {
   font-size: 1.875em; /* 30px/16=1.875em */
 }
 
 p {
   font-size: 0.875em; /* 14px/16=0.875em */
 }

اندازه قلم پاسخگو (Responsive)

اندازه متن را می توان با واحد vw تنظیم کرد ، که به معنی "عرض نما" یا viewport width است.

به این ترتیب اندازه متن با اندازه پنجره مرورگر تطبیق می شود:

Hello World

اندازه مرورگر را تغییر دهید تا تغییرات اندازه فونت را ببینید

مثال :

<h1 style="font-size:10vw">Hello World</h1> 
Viewport اندازه پنجره مرورگر است. 1vw = 1٪ از عرض بازدید. اگر پهنا 50cm باشد ، 1vw=0.5cm است.