فونت وب در CSS
font-family و اندازه و وزن را بلدید. فونت وب قلمی را از اینترنت می‌آورد که لزوماً روی گوشی یا رایانهٔ بازدیدکننده نصب نیست. با @font-face معرفی‌اش می‌کنید، بعد مثل بقیهٔ فونت‌ها صدا می‌زنید، و در آخر یک فونت جایگزین مطمئن می‌گذارید.
تکه‌های @font-face
📊 @font-face یک‌نگاهه
| تکه | کار روزمره |
|---|---|
font-family |
نامی که خودتان می‌گذارید و بعداً در CSS صدا می‌زنید |
src |
فایل(های) فونت کجایند (url(...) و اغلب format(...)) |
font-weight / font-style |
این فایل کدام نسخه است (معمولی، ضخیم، ایتالیک…) |
font-display |
متن هنگام بارگذاری فونت چطور رفتار کند (مثل swap) |
دو قدم آرام کافی است: اول با @font-face قلم را ثبت کنید، بعد همان نام خانواده را در قواعد معمولی صدا بزنید. اگر یکی را جا بگذارید، مرورگر فایل سفارشی را پیدا نمی‌کند.
یک @font-face مینیمال
به قلم نامی واضح بدهید و src را به فایل فونت روی سایت خودتان (یا CDN) وصل کنید.
@font-face پایه
css@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}بیش از یک قالب بدهید
مرورگرهای امروزی woff2 را دوست دارند. اگر بعدش woff هم بنویسید، مرورگرهای قدیمی‌تر جا نمی‌مانند. بهترین قالب را اول بگذارید.
اول woff2 بعد woff
css@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}font-display — متن زودتر دیده شود
با font-display: swap مرورگر اول متن را با فونت جایگزین نشان می‌دهد؛ وقتی فونت وب رسید، جایش را عوض می‌کند. این کار معمولاً بهتر از آن است که متن مدتی نامرئی بماند.
Display swap
css@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}همان خانواده‌ای را که اعلان کردید صدا بزنید
بعد از @font-face، در قواعدتان همان نام font-family را بنویسید — و یک جایگزین عمومی مثل sans-serif را از قلم نیندازید.
اعمال خانوادهٔ سفارشی
cssbody {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}عادت آرام میزبانی روی خودتان
فقط وزن‌هایی را نگه دارید که واقعاً لازم دارید، woff2 را ترجیح دهید، font-display بگذارید، و همیشه پشتهٔ سیستم یا عمومی داشته باشید.
عنوان با نسخهٔ ضخیم بارگذاری‌شده
css@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}خودتان امتحان کنید
- یک بلوک
@font-faceبا نامfont-familyخودتان وsrcاز نوعwoff2بنویسید. - خط دوم
srcبرایwoffاضافه کنید. font-display: swapبگذارید.- روی
bodyبنویسید"Your Name", sans-serif. - اگر فایل ضخیم دارید،
@font-faceجدا برای وزن700بگذارید — بعد روی عنوانfont-weight: 700.
اشتباهات رایج
@font-faceنوشتن، ولی همان نام را درfont-familyصدا نزدن- حذف فونت جایگزین (اگر فایل لود نشود ظاهر صفحه می‌شکند)
- بارگذاری وزن‌ها و استایل‌های زیادی که اصلاً استفاده نمی‌کنید (صفحه کند می‌شود)
- بدون
font-displayمتن را مدت طولانی نامرئی گذاشتن - قاطی کردن این درس با text-shadow و افکت‌ها (آن‌ها درس بعدی‌اند)
خلاصه
@font-faceنام خانوادهٔ سفارشی را ثبت می‌کند و به فایل‌های فونت اشاره می‌دهدwoff2را ترجیح دهید؛ در صورت نیازwoffهم بگذاریدfont-display: swapاغلب هنگام بارگذاری متن را خوانا نگه می‌دارد- همان نام خانواده را در CSS با جایگزین سیستم یا عمومی استفاده کنید
- فقط نسخه‌های لازم را بارگذاری کنید؛ افکت‌هایی مثل text-shadow درس بعدی‌اند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود