فونت وب CSS

قاعده @font-face CSS

فونت‌های وب به طراحان وب اجازه می‌دهند از فونت‌هایی که روی کامپیوتر کاربر نصب نشده‌اند استفاده کنند.

پس از اینکه فونتی را که می‌خواهید استفاده کنید پیدا کردید یا خریداری کردید، فقط کافی است فایل فونت را در سرور وب خود قرار دهید، تا در زمان نیاز به کاربران دانلود شود.

فونت‌های ‘مخصوص’ شما در CSS @font-face در قوانین تعریف شده است.

فرمت‌های مختلف فونت

فونت TrueType (TTF)

TrueType استاندارد فونت است که در اواخر دهه 1980 توسط Apple و Microsoft توسعه یافت. TrueType فرمتی است که در سیستم‌عامل‌های Mac OS و Microsoft Windows بیشترین استفاده را دارد.

فونت OpenType (OTF)

OpenType فرمتی برای فونت‌های قابل انعطاف کامپیوتری است. این فرمت بر اساس TrueType ساخته شده و یک برند ثبت شده توسط مایکروسافت است. امروز، فونت‌های OpenType در پلتفرم‌های اصلی کامپیوتری به طور گسترده استفاده می‌شوند.

فونت‌های وب آزاد (WOFF)

WOFF فرمتی برای فونت‌های وب است. این فونت در سال 2009 توسعه یافت و اکنون به عنوان استاندارد پیشنهادی W3C شناخته می‌شود. WOFF به طور اساسی OpenType یا TrueType با فشرده‌سازی و داده‌های متا است. هدف آن پشتیبانی از توزیع فونت از سرور به کاربر در شبکه‌هایی با محدودیت باند است.

فونت‌های وب آزاد (WOFF 2.0)

فونت‌های TrueType/OpenType از فونت‌های WOFF 1.0 بهتر فشرده می‌شوند.

فونت/شکل SVG

فونت SVG اجازه می‌دهد که SVG را به عنوان شکل حروف در نمایش متن استفاده شود. استاندارد SVG 1.1 یک ماژول فونت را تعریف کرده است که اجازه می‌دهد فونت‌ها در مستند SVG ایجاد شوند. شما همچنین می‌توانید CSS را به مستند SVG اعمال کنید و قاعده @font-face نیز می‌تواند به متن مستند SVG اعمال شود.

ایمپلائیسیو آپن تایپ فونت (ای او تی)

فونت EOT یک فرمت فونت OpenType فشرده شده توسط Microsoft است که به عنوان فونت تعبیه شده در وب استفاده می‌شود.

پشتیبانی مرورگر از فرمت فونت

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

فرمت فونت
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 پشتیبانی نمی‌شود پشتیبانی نمی‌شود پشتیبانی نمی‌شود 3.2 پشتیبانی نمی‌شود
EOT 6.0 پشتیبانی نمی‌شود پشتیبانی نمی‌شود پشتیبانی نمی‌شود پشتیبانی نمی‌شود

*IE:این فرمت فونت فقط در حالتی که تنظیم شده باشد "installable" معتبر است.

*Firefox:به طور پیش‌فرض پشتیبانی نمی‌شود، اما می‌توان آن را فعال کرد (برای استفاده از WOFF2 باید نشانه تنظیم شود به "true")

از فونت مورد نیاز خود استفاده کنید

در قوانین @font-face: ابتدا نام فونت را تعریف کنید (مثلاً myFirstFont) و سپس به فایل فونت اشاره کنید.

توصیه:URL فونت همیشه باید با حروف کوچک باشد. حروف بزرگ ممکن است در IE نتایج غیرمنتظره‌ای تولید کند.

برای استفاده از فونت در عناصر HTML، نام فونت را از طریق属性 font-family ارجاع دهید (myFirstFont):

مثال

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div {
  font-family: myFirstFont;
}

آزمایش کنید

از متن تیره استفاده کنید

شما باید یک قوانین @font-face دیگر اضافه کنید که شامل توضیحات متن تیره است:

مثال

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

آزمایش کنید

فایل "sansation_bold.woff" یک فایل فونت دیگر است که حاوی حروف تیره فونت Sansation است.

وقتی یک قطعه متن با فونت خانواده "myFirstFont" باید تیره شود، مرورگر از آن استفاده می‌کند.

به این ترتیب، شما می‌توانید برای یک فونت بسیاری از @font-face قوانین آورده شده است.

توضیحات فونت CSS

در جدول زیر لیستی از @font-face تمام توضیحات‌دهنده‌های فونت (font descriptor) که در قوانین تعریف شده‌اند:

توضیحات‌دهنده مقدار توضیحات
font-family name ضروری است. نام فونت را تعریف کنید.
src URL ضروری است. URL فایل فونت را تعریف کنید.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 اختیاری۔فونٹ کو کس طرح سے بڑھایا جانا چاہئے، مطلق مقادیر "normal" ہیں۔
font-style
  • normal
  • italic
  • oblique
 اختیاری۔فونٹ کا انداز معین کرتا ہے۔ مطلق مقادیر "normal" ہیں۔
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 اختیاری۔فونٹ کی کثیرتی کا معین کرتا ہے۔ مطلق مقادیر "normal" ہیں۔
unicode-range unicode-range اختیاری۔فونٹ کا استعمال کرنے والا یونیکد کاراکٹر کا دائرہ معین کرتا ہے۔ مطلق مقادیر "U+0-10FFFF" ہیں۔