فصل ۱۴ | CSS Text & Fonts

فونت‌ها در CSS

Font (فونت یا قلم) ظاهر کلی حروف و نوشته‌های یک صفحه‌ی وب را تعیین می‌کند. CSS ویژگی‌های مختلفی برای کنترل نوع، اندازه، ضخامت و سبک فونت در اختیار قرار می‌دهد. در این درس با مهم‌ترین ویژگی‌های مربوط به فونت آشنا می‌شویم.

خانواده‌ی فونت (font-family)

ویژگی font-family نوع فونتی را که برای نمایش متن استفاده می‌شود، مشخص می‌کند. معمولاً چند فونت به‌صورت لیست و جدا از هم با علامت , نوشته می‌شوند تا اگر فونت اول در دستگاه کاربر موجود نبود، فونت بعدی جایگزین آن شود.

style.css
p{
    font-family: Arial, Tahoma, 
    sans-serif;
}

در این مثال، مرورگر ابتدا تلاش می‌کند از فونت Arial استفاده کند؛ اگر در دسترس نبود، Tahoma را امتحان می‌کند و در نهایت اگر هیچ‌کدام موجود نبود، از یک فونت عمومی خانواده‌ی sans-serif استفاده می‌کند.

نکته: بهتر است همیشه در انتهای لیست font-family، یک خانواده‌ی فونت عمومی مانند sans-serif یا serif نوشته شود تا در صورت نبود سایر فونت‌ها، مرورگر همچنان بتواند متن را نمایش دهد.

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

ویژگی font-size اندازه‌ی حروف متن را تعیین می‌کند. مقدار آن می‌تواند بر حسب واحدهایی مانند پیکسل (px) یا em نوشته شود.

style.css
h1{
    font-size: 32px;
}

در این مثال، اندازه‌ی فونت عنصر h1 برابر 32px تنظیم شده است.

ضخامت فونت (font-weight)

ویژگی font-weight میزان ضخامت حروف را مشخص می‌کند. مقدار آن می‌تواند کلمه‌ای مانند normal و bold ، یا عددی بین ۱۰۰ تا ۹۰۰ باشد.

style.css
strong{
    font-weight: bold;
}

در این مثال، متن داخل عنصر strong با ضخامت bold نمایش داده می‌شود.

سبک فونت (font-style)

ویژگی font-style برای نمایش متن به‌صورت کج (ایتالیک) یا معمولی استفاده می‌شود. مقادیر رایج آن normal و italic هستند.

style.css
em{
    font-style: italic;
}

ر این مثال، متن داخل عنصر em به‌صورت کج نمایش داده می‌شود.

ویژگی کوتاه‌شده‌ی font

به‌جای نوشتن چند ویژگی جداگانه، می‌توان از ویژگی کوتاه‌شده‌ی font استفاده کرد و سبک، ضخامت، اندازه و خانواده‌ی فونت را در یک خط تعریف کرد.

style.css
p{
    font: italic bold 16px;
}

در این مثال، متن پاراگراف‌ها به‌صورت کج، ضخیم، با اندازه‌ی 16px و فونت Arial نمایش داده می‌شود. توجه کنید که در ویژگی کوتاه‌شده‌ی font، حتماً باید مقدار font-size و font-family نوشته شوند.