معرفی فونت‌ها در CSS
فونت‌ها در طراحی وب بسیار مهم هستند چون به ترکیب بصری محتوای صفحه‌ی شما کمک می‌کنند و تاثیر زیادی بر روی کاربر نهایی می‌گذارند. استفاده‌ی مناسب از فونت‌ها می‌تواند هم‌زمان بر زیبایی و خوانایی سایت تاثیر مثبت بگذارد.
فونت‌های امن برای وب
در طراحی وب، گاهی اوقات به خاطر ناسازگاری بین مرورگرها، باید از فونت‌های امن وب استفاده کنیم که همه‌ی مرورگرها به خوبی نمایش دهند. این شامل فونت‌هایی مثل Arial، Verdana و Times New Roman می‌شود.
استفاده از فونت‌های سفارشی
برای داشتن طراحی منحصربه‌فرد، می‌توانید از فونت‌های سفارشی استفاده کنید. برای این کار، معمولاً از فونت‌هایی که در گوگل فونت یا سایر منابع آنلاین موجود هستند استفاده می‌شود. در نظر داشته باشید که استفاده‌ی بهینه از فونت‌های سفارشی می‌تواند سرعت بارگذاری سایت را تحت تاثیر قرار دهد.
تاثیر فونت‌ها بر تجربه کاربری
فونت‌ها یکی از عوامل مهم در تجربه‌ی کاربری هستند. فونت مناسب می‌تواند حس و حال و مهم‌تر از آن پیغام کسب و کار شما را به کاربر انتقال دهد. با انتخاب درست فونت، نه تنها زیبایی طراحی سایت خود را افزایش می‌دهید، بلکه تجربه‌ای مطلوب و خوانا برای کاربران ایجاد می‌کنید.
p {
font-family: 'Arial', sans-serif;
}
h1 {
font-family: 'Georgia', serif;
}
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2');
}
body {
font-family: 'MyCustomFont', sans-serif;
}
توضیح خط به خط کد
p { font-family: 'Arial', sans-serif; } برای پاراگراف‌ها از فونت Arial یا در صورتی که در دسترس نباشد، از یک فونت پیش‌فرض بدون سریف استفاده می‌شود.
h1 { font-family: 'Georgia', serif; } صندوق‌های سطح یک هدر با استفاده از فونت Georgia نمایش داده می‌شوند، و اگر در دسترس نباشد، سرریز می‌شود به خانواده فونت‌های سریف.
@font-face به شما این امکان را می‌دهد که فونت‌های سفارشی را در وب‌سایت خود قرار دهید.
font-family: 'MyCustomFont'; نام فونت سفارشی شما که می‌توانید در CSS با آن مراجعه کنید.
src: url('my-custom-font.woff2') format('woff2'); مسیر فایل فونت مرتباً با فرمت woff2 که یک فرمت بهینه‌شده برای وب است.
body { font-family: 'MyCustomFont', sans-serif; } تنظیم استفاده از فونت سفارشی برای تمامی متن‌های موجود در بدنه صفحه.