خصوصیات font در css

Font family

خصوصیت font-family باید چندین نام فونت را به عنوان یک سیستم «پشتیبان» نگه دارد. اگر مرورگر اولین فونت را پشتیبانی نکرد، فونت بعدی را اعمال کند و غیره.

نکته: اگر نام یک خانواده فونت بیش از یک کلمه باشد، باید در علامت نقل قول، مانند: “Times New Roman” قرار گیرد.

برای استفاده از بیش از یک خانواده فونت در لیست آنها را با کاما از هم جدا می کنیم:

p {
   font-family: "Times New Roman", Times, serif;
}

Font style

خصوصیت font-style عمدتا برای مشخص کردن متن کلامی استفاده می شود.

این ویژگی دارای سه مقدار است:

  • normal : متن به طور معمول نمایش داده می شود
  • italic : متن به صورت کج نشان داده می شود
  • oblique : متن “تکیه گاه” است (شیب دار بسیار شبیه به italic است اما کمتر پشتیبانی می شود)
p.normal {
   font-style: normal;
}
p.italic {
   font-style: italic;
}
p.oblique {
   font-style: oblique;
}
<p class="normal">This is a paragraph in italic style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

خروجی :

This is a paragraph in normal style.

This is a paragraph in italic style.

This is a paragraph in oblique style.

Font Size

خاصیت font-size اندازه قلم متن را تنظیم می کند.

توانایی مدیریت اندازه متن در طراحی وب مهم است. با این حال، شما نباید از تنظیمات اندازه فونت استفاده کنید تا پاراگراف ها را اندازه هدینگ بکنید یا هدینگ ها (h1..h6) را هم اندازه هم بکنید.

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

اندازه مطلق :

  • متن را به یک اندازه مشخص تنظیم می کند
  • اجازه نمیدهد که کاربر اندازه متن را در تمام مرورگرها تغییر دهد
  • اندازه مطلق زمانی مفید است که اندازه فیزیکی خروجی شناخته شده است

اندازه نسبی :

  • اندازه را نسبت به عناصر اطراف تنظیم می کند
  • به کاربر امکان می دهد اندازه متن را در مرورگرها تغییر دهد
طراحی سایت گردشگری
شاید این مطلب را نیز بپسندید

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

تنظیم اندازه فونت با پیکسل

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

h1 {
   font-size: 40px;
}
h2 {
   font-size: 30px;
}
p {
   font-size: 14px;
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

خروجی :

This is heading 1

This is heading 2

This is a paragraph.

تنظیم اندازه فونت با em

برای اجازه دادن به کاربران برای تغییر اندازه متن (در منوی مرورگر)، بسیاری از توسعه دهندگان ازem به جای پیکسل استفاده می کنند.

۱em برابر اندازه فونت فعلی است. اندازه متن پیش فرض در مرورگرها ۱۶ پیکسل است. بنابراین، اندازه پیش فرض ۱em برابر ۱۶ پیکسل است.

اندازه را می توان از پیکسل ها به EM با استفاده از این فرمول محاسبه کرد: pixels/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 */
}
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

خروجی :

This is heading 1

This is heading 2

This is a paragraph.

Font Weight

خصوصیت font-weight وزن فونت را مشخص می کند:

p.normal {
   font-weight: normal;
}
p.light {
   font-weight: lighter;
}
p.thick {
   font-weight: bold;
}
p.thicker {
   font-weight: 900;
}
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

خروجی :

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

اندازه فونت واکنش گرا :

اندازه متن را می توان با واحد VW تنظیم کرد، که به معنی “عرض نمایشگر” است.

به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:

<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

Viewport اندازه پنجره مرورگر است. ۱vw = 1٪ از عرض نمایشگر است، اگر عرض نمایشگر ۵۰cm باشد، ۱vw=0.5cm است.

آموزش CSS (بخش دهم)