CSS @font-face Rule برای فونت‌های وب
قانون @font-face در CSS به طراحان وب اجازه می‌دهد از فونت‌هایی استفاده کنند که روی کامپیوتر کاربر نصب نشده‌اند. شما می‌توانید فایل فونت خود را روی سرور وب‌سایت خود قرار دهید و مرورگر به طور خودکار آن را دانلود می‌کند.
فرمت‌های مختلف فونت
TrueType Fonts (TTF)
فرمت TrueType در اواخر دهه 1980 توسط Apple و Microsoft توسعه یافت. این فرمت رایج‌ترین نوع فونت برای سیستم‌عامل‌های Mac و Windows است.
OpenType Fonts (OTF)
فرمت OpenType بر پایه TrueType ساخته شده و توسط Microsoft ثبت شده است. این فرمت در بسیاری از پلتفرم‌های رایانه‌ای استفاده می‌شود.
Web Open Font Format (WOFF)
فرمت WOFF برای استفاده در صفحات وب طراحی شده و از TrueType یا OpenType با فشرده‌سازی و متادیتا اضافی تشکیل شده است. هدف اصلی این فرمت، انتقال فونت‌ها با محدودیت پهنای باند از سرور به کاربر است.
Web Open Font Format (WOFF 2.0)
WOFF 2.0 نسخه بهبود یافته WOFF 1.0 است و فشرده‌سازی بهتری ارائه می‌دهد.
SVG Fonts/Shapes
فونت‌های SVG به شما اجازه می‌دهند از SVG به عنوان گلیف‌ها برای نمایش متن استفاده کنید.
Embedded OpenType Fonts (EOT)
فونت‌های EOT یک فرم فشرده از OpenType هستند که توسط Microsoft برای استفاده در صفحات وب طراحی شده‌اند.
پشتیبانی مرورگرها از فرمت‌های مختلف فونت
مرورگرهای مختلف از فرمت‌های گوناگون پشتیبانی می‌کنند. در جدول زیر نسخه‌های اولیه مرورگرها که از فرمت‌های مختلف فونت پشتیبانی می‌کنند، مشخص شده است:
| فرمت فونت | IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| TTF/OTF | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Unsupported | Unsupported | 3.2 | Unsupported | Unsupported |
| EOT | 6.0 | Unsupported | Unsupported | Unsupported | Unsupported |
استفاده از فونت دلخواه
برای استفاده از فونت دلخواه خود ابتدا باید آن را با قانون @font-face تعریف کنید. برای این کار، ابتدا یک نام برای فونت مشخص می‌کنید و سپس به فایل فونت ارجاع می‌دهید.
مثال:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}استفاده از متن ضخیم (Bold)
برای استفاده از متن‌های ضخیم، باید یک قانون @font-face دیگر اضافه کنید که شامل ویژگی‌های مربوط به فونت ضخیم باشد.
مثال:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}به این ترتیب، مرورگر هر زمان که به متن ضخیم نیاز باشد، از فایل فونت sansation_bold.woff استفاده می‌کند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام