فونت های سفارشی CSS (Custom Fonts)
در این مطلب با «فونت های سفارشی CSS» آشنا می شویم. با قانون @font-face می توانید فونت دلخواه را بدون نصب روی سیستم کاربر بارگذاری کنید. سپس آن را با ویژگی font-family در عناصر به کار بگیرید.
قانون @font-face برای فونت های سفارشی CSS
قانون @font-face امکان تعریف نام فونت و مسیر فایل را می دهد. مرورگر فایل فونت را در صورت نیاز دانلود می کند.
@font-face { font-family: myFont; /* set name */ src: url(sansation_light.woff); /* url of the font */ } p { font-family: myFont; /* use font */ }
فرمت های رایج فونت برای وب
برای صفحات وب معمولاً از WOFF/WOFF2 استفاده می شود؛ در دسکتاپ نیز TTF/OTF رایج اند. WOFF/WOFF2 برای کاهش حجم بهینه شده اند.
WOFF/WOFF2
این فرمت ها برای وب ایده آل هستند و توسط همه مرورگرهای اصلی پشتیبانی می شوند.
TTF/OTF
فرمت های TTF/OTF محبوب و باکیفیت اند، اما برای وب بهینه نشده اند و معمولاً حجم بیشتری دارند.
وزن های مختلف با @font-face جداگانه
برای متن بولد باید قانون دیگری با font-weight: bold تعریف کنید تا مرورگر هنگام بولد کردن، فایل درست را بارگذاری کند.
@font-face { font-family: myFont; src: url(sansation_bold.woff); font-weight: bold; }
نکته: می توانید چندین قانون @font-face برای یک نام فونت داشته باشید و وزن یا سبک های مختلف را پوشش دهید.
توصیف گرهای @font-face
درون قانون @font-face می توانید توصیف گرهای زیر را تعیین کنید:
- font-family: اجباری؛ نام فونت.
- src: اجباری؛ مسیر فایل فونت.
- font-stretch: اختیاری؛ میزان کشیدگی.
- font-style: اختیاری؛ سبک فونت.
- font-weight: اختیاری؛ وزن فونت.
- font-display: اختیاری؛ نحوه لود و نمایش.
- unicode-range: اختیاری؛ محدوده کاراکترها.
هشدار: اگر برای وزن های مختلف قانون جداگانه نگذارید، مرورگر ممکن است وزن ها را شبیه سازی کند و کیفیت کاهش یابد.
ادامه مطالعه
برای ترکیب تایپوگرافی با UI، بخش های مرتبط را ببینید: افکت های متن CSS و نیز تبدیل های دوبعدی CSS.