CSS – فونت‌های وب (Web Fonts)

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 استفاده می‌کند.

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.