خصوصیت فونت در css ، سایز، font family، استایل متن و bold بودن آن را تعیین می کند.

تصویر زیر تفاوت بین فونت serif و sans-serif را نشان می دهد:

Font Family

فونت در css در دو دسته Font Family وجود دارد:
generic family: دسته ای از font family هایی هستند که ظاهری مشابه دارند. (مانند “Serif” یا “Monospace”)
font family: یک نوع فونت خاص هستند. (مانند “Times New Roman” یا “Arial”)

نکته: در صفحه نمایش کامپیوترها، نمایش فونت های sans-serif آسان تر از serif می باشد.
خصوصیت font-family می بایست شامل فونت هایی باشد که فونت های fallback نامیده می شوند. این ها فونت هایی هستند که اگر تحت هر شرایطی، مرورگر فونت اصلی را پشتیبانی نکند، فونت های بعدی fallback را امتحان می کند.
نکته: اگر نام font-family بیش از یک کلمه است، می بایست از quotation mark استفاده کنید مانند: “Times New Roman”
و اگر می خواهید از بیش از یک font-family استفاده کنید، آن ها را با استفاده از کاما، از یکدیگر جدا کنید:

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;
}

Font Size

خصوصیت font-size اندازه فونت در css را تعیین می کند.
تعیین اندازه متن در طراحی سایت بسیار مهم است. برای این کار هرگز نباید فونت را بزرگ کنید تا اندازه heading شود و یا heading را کوچک کنید تا اندازه فونت معمولی شود.
همیشه از تگ های HTML استفاده کنید: h1 تا h6 برای heading و p برای پاراگراف.
font-size می تواند به صورت absolute یا relative باشد.

Absolute size

• متن را به اندازه مشخص شده می رساند.
• به کاربر این اجازه را نمی دهد که اندازه فونت را در مرورگرهای مختلف تغییر دهد.
• absolute size برای زمانی کاربردی است که اندازه صفحه نمایش، مشخص باشد.

Relative size

• اندازه متن متناسب با المان های اطراف تغییر می کند.
• به کاربر این اجازه را می دهد که فونت را در مرورگر تغییر دهد.

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

تعیین فونت در css با استفاده از px

مقداردهی font-size با استفاده از پیکسل این امکان را به شما می دهد که کاملا بر روی اندازه فونت کنترل داشته باشید:

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

نکته: اگر از پیکسل استفاده کنید، قادر خواهید بود برای تغییر اندازه “کل صفحه” از ابزار zoom استفاده کنید.

تعیین font-size با استفاده از em

اکثر برنامه نویسان به جای px از em استفاده می کنند زیرا در این صورت، کاربر قادر خواهد بود که اندازه فونت را با استفاده از منوی مرورگر تغییر دهد.

کنسرسیوم جهانی وب (W3C) نیز استفاده از واحد 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 */
}

اندازه font-size در دو مثال قبل به یک اندازه بود اما در مثال دوم px به em تبدیل شده است.
متأسفانه نسخه های قدیمی IE هنوز هم با واحد em مشکل دارند؛ وقتی می خواهیم متن را بزرگ کنیم، بزرگ تر از آنچه باید، می شود و وقتی که می خواهیم آن را کوچک کنیم، کوچک تر از آنچه که باید، می شود.

ترکیبی از درصد و em

راه حلی که برای تمامی مرورگرها موثر واقع می شود این است که مقدار پیش فرض font-size را به عنوان درصدی از المان body تعیین کنیم.

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

اکنون این کد بسیار عالی است زیرا در تمام مرورگرها به یک اندازه نمایش داده می شود و به مرورگرها این اجازه را می دهد که روی متن zoom کنند یا تغییر اندازه دهند.

Font Weight

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

p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}

Responsive Font Size

همچنین می توان سایز متن را با واحد vw تعیین کرد که مخفف عبارت “viewport width” است که با استفاده از آن سایز متن متناسب با اندازه پنجره صفحه نمایش تغییر می کند مانند متن زیر:

<h1 style="font-size:5vw">webtml.ir</h1>

webtml.ir

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

Font Variant

خصوصیت font-variant نشانگر این است که آیا یک متن با فونت small-caps نمایش داده می شود یا خیر.
با استفاده از فونت small-caps تمامی حروف کوچک به بزرگ تبدیل می شوند ولی اندازه آن ها کوچک تر از حروف بزرگ اصلی خود متن است.
به مثال زیر دقت کنید:

p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}

برگرفته از وب سایت w3schools