انتخاب فونت مناسب: font-family و Web Fonts
وارد فصل هشتم شدیم؛ فصلی که به یکی از بصریترین و در عین حال تأثیرگذارترین جنبههای طراحی وب اختصاص داره: تایپوگرافی. اولین قدم در این مسیر، فهمیدن اینه که چطور فونت مورد نظرمون رو به مرورگر معرفی کنیم؛ چه فونتهایی که از قبل روی سیستم کاربر نصبن، و چه فونتهای سفارشی که خودمون از وب بارگذاری میکنیم.
font-family چیست؟
Property به اسم font-family مشخص میکنه متن یک عنصر با کدوم فونت (یا فونتها) نمایش داده بشه.
p {
font-family: Arial;
}در این مثال ساده، مرورگر تلاش میکنه متن رو با فونت Arial نمایش بده. اما این روش، یه مشکل احتمالی داره: اگه فونت Arial روی سیستم کاربر نصب نباشه، مرورگر باید یه تصمیم جایگزین بگیره.
Font Stack: لیستی از گزینههای جایگزین
p {
font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
}به همین دلیل، در عمل تقریباً همیشه بهجای یک فونت تنها، یک لیست از چند فونت (که بهش Font Stack گفته میشه) تعریف میکنیم. مرورگر این لیست رو از چپ به راست بررسی میکنه: اول تلاش میکنه اولین فونت (Segoe UI) رو پیدا کنه؛ اگه روی سیستم کاربر نصب نبود، سراغ فونت بعدی (Tahoma) میره؛ و به همین ترتیب تا آخر لیست.
چرا آخرین گزینه همیشه یک Generic Font Family است؟
در مثال بالا، آخرین مقدار sans-serif است؛ که برخلاف بقیه، اسم یک فونت مشخص نیست، بلکه یک Generic Font Family (خانواده فونت عمومی) است. این مقدار، بهعنوان آخرین خط دفاعی، به مرورگر میگه: «اگه هیچکدوم از فونتهای قبلی در دسترس نبود، حداقل یه فونت از دسته sans-serif (بدون سریف) استفاده کن»؛ به این ترتیب، همیشه یه فونت قابلقبول نمایش داده میشه، حتی اگه هیچکدوم از فونتهای دلخواه اصلی موجود نباشن.
خانوادههای اصلی Generic Font Family
| خانواده | ویژگی |
|---|---|
| serif | دارای خطوط تزئینی کوچک در انتهای حروف (مثل Times New Roman) |
| sans-serif | بدون خطوط تزئینی، ساده و مدرن (مثل Arial) |
| monospace | تمام حروف عرض یکسانی دارند (مناسب برای نمایش کد) |
| cursive | شبیه دستنویس |
| fantasy | تزئینی و غیررسمی |
code {
font-family: "Courier New", monospace;
}در این مثال، برای نمایش قطعه کد، از یک Font Stack مناسب استفاده شده که در نهایت به monospace ختم میشه؛ چون برای نمایش کد، عرض یکسان حروف اهمیت زیادی داره.
قوانین نوشتن نام فونت
.example-a {
font-family: Arial;
}
.example-b {
font-family: "Segoe UI";
}نام فونتهایی که شامل فاصله هستن (مثل Segoe UI)، باید داخل گیومه نوشته بشن؛ در غیر اینصورت مرورگر ممکنه بخشهای مختلف نام رو بهاشتباه بهعنوان چند فونت جدا تفسیر کنه. نام فونتهای تککلمهای (مثل Arial) نیازی به گیومه ندارن، هرچند استفاده از گیومه برای همه نامها هم اشتباه نیست و گاهی برای یکدستی کد ترجیح داده میشه.
محدودیت فونتهای سیستمی: فقط چیزی که نصب است
مشکل اصلی روشی که تا اینجا دیدیم اینه که فقط به فونتهایی وابستهست که از قبل روی سیستم کاربر نصب شدن. اگه بخوایم یه فونت خاص و سفارشی (مثلاً فونتی که بخشی از هویت بصری برنده) رو تضمین کنیم که برای همه کاربران، صرفنظر از فونتهای نصبشدهشون، یکسان نمایش داده بشه، نیاز به روش دیگهای داریم: Web Fonts.
Web Fonts چیست؟
Web Fonts به فونتهایی گفته میشه که خود فایل فونت، از طریق وب بارگذاری میشه و نیازی به نصب از پیش روی سیستم کاربر نداره. مرورگر این فایل رو دقیقاً مثل یک تصویر یا فایل CSS دیگه، از سرور دانلود میکنه و بعد از دانلود کامل، اون رو برای نمایش متن استفاده میکنه.
روش اول: استفاده از سرویسهای فونت آماده
سادهترین روش استفاده از Web Fonts، اتصال به یک سرویس فونت آماده (مثل Google Fonts) از طریق یک تگ link در HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">body {
font-family: "Roboto", sans-serif;
}در این روش، فایل CSS مربوط به فونت مورد نظر، مستقیماً از سرور همون سرویس بارگذاری میشه؛ و بعد از اون، میشه اسم فونت رو دقیقاً مثل هر فونت دیگهای، داخل font-family استفاده کرد.
روش دوم: بارگذاری فونت با @font-face
روش دوم، وقتی فایل فونت رو خودمون مستقیماً روی سرور پروژه میزبانی میکنیم (نه از طریق یک سرویس خارجی)، استفاده از قانون @font-face است. جزئیات کامل این روش، همراه با مفاهیمی مثل Font Loading و Variable Fonts، رو در درسهای بعدی همین فصل با عمق بیشتری بررسی میکنیم؛ فعلاً فقط یک نمای کلی میبینیم:
@font-face {
font-family: "MyCustomFont";
src: url("mycustomfont.woff2") format("woff2");
}
body {
font-family: "MyCustomFont", sans-serif;
}در این روش، ابتدا با @font-face یه اسم دلخواه (اینجا MyCustomFont) رو به یک فایل فونت مشخص وصل میکنیم، و بعد دقیقاً مثل هر فونت دیگهای، این اسم رو داخل font-family استفاده میکنیم.
چرا همیشه باید یک Fallback مناسب داشته باشیم؟
body {
font-family: "Roboto", "Segoe UI", Tahoma, sans-serif;
}حتی وقتی از Web Fonts استفاده میکنیم، همچنان بهترین روش اینه که چند فونت جایگزین (Fallback) هم در Font Stack بذاریم. دلیلش اینه که فایل فونت وب، ممکنه بهخاطر مشکلات شبکه، سرعت اینترنت کاربر، یا مشکلات موقت سرور، دیرتر یا اصلاً بارگذاری نشه. داشتن Fallback مناسب، تضمین میکنه که حتی در این شرایط، کاربر یه فونت قابلقبول (نه یه فونت کاملاً پیشفرض و ناهماهنگ) ببینه.
نکات مهم
- font-family باید همیشه بهعنوان یک لیست (Font Stack) تعریف بشه، نه یک فونت تنها.
- آخرین مقدار در هر Font Stack باید یک Generic Font Family باشد تا همیشه یک فونت قابلقبول تضمین شود.
- نام فونتهای چندکلمهای باید داخل گیومه نوشته شوند.
اشتباهات رایج
- تعریف فقط یک فونت تنها، بدون هیچ گزینه جایگزین یا Generic Font Family.
- فراموش کردن گیومه برای نام فونتهایی که شامل فاصله هستن.
- وابستگی کامل به یک Web Font بدون تعریف Fallback مناسب، که در صورت کندی یا مشکل بارگذاری، تجربه کاربری را مختل میکند.
جمعبندی
Property به اسم font-family مشخص میکند متن با کدام فونت (یا لیستی از فونتهای جایگزین) نمایش داده شود، و همیشه باید با یک Generic Font Family خاتمه یابد. برای فونتهای سفارشی که بهطور پیشفرض روی سیستم کاربر نصب نیستند، از Web Fonts استفاده میشود؛ چه از طریق یک سرویس آماده مثل Google Fonts، چه از طریق @font-face که در درسهای بعدی همین فصل کامل بررسی میشود.