آموزش وب فونت ها در CSS

بررسی دستور font-face@ در CSS

وب فونت ها به طراحان وب امکان می دهند تا از فونت هایی استفاده کنند که در رایانه ی کاربر نصب نمی شوند. وقتی که فونت خود را خریداری کردید، کافیست فایل فونت را در وب سرور(هاست) خود قرار دهید؛ حالا هروقت نیاز شد، این فونت برای کاربر دانلود می شود. فونت های خود را می توانید با استفاده از دستور font-face@ (در سایت خود) تعریف کنید.

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

TrueType Fonts (TTF)

TrueType یک استاندارد فونت است که در اواخر سال 1980 توسط شرکت اپل و مایکروسافت توسعه یافت. TrueType متداول ترین فرمت فونت برای هر دوی سیستم عامل های Mac و ویندوز است.

OpenType Fonts (OTF)

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

The Web Open Font Format (WOFF)

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

The Web Open Font Format (WOFF 2.0)

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

SVG Fonts/Shapes

این فونت ها به SVG امکان می دهند تا به هنگام نمایش دادن متن، به صورت گلیف ها(علامت ها)،  به کار روند.

مشخصات SVG 1.1 ،یک ماژول فونت را تعریف می کند که امکان می دهد فونت ها در داخل یک سند SVG ایجاد شوند. شما همچنین می توانید CSS را در SVG اعمال کنید و دستور font-face@ می تواند در متن درون سندهای SVG اعمال شود.

Embedded OpenType Fonts (EOT)

فونت های EOT ، نسخه ی فشرده شده ی فونت های OpenType هستند که توسط مایکروسافت برای استفاده بعنوان فونت های جاساز شده(embedded fonts) در صفحات وب طراحی شده است.

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

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

					فرمت فونت
4.0	9.0*	3.5	10.0	3.1	TTF/OTF
5.0	9.0	3.6	11.1	5.1	WOFF
36.0	14.0	39.0	26.0	10.0	WOFF2
No	No	No	No	3.2	SVG
No	6.0	No	No	No	EOT

 * در مرورگر اینترنت اکسپلورر(IE)، فرمت فونت تنها وقتی کار می کند که روی installable تنظیم شده باشد.

استفاده از فونت دلخواه ما

در دستور font-face@ ابتدا باید یک نام را برای فونت مشخص کنیم(مثلا myFirstFont) و آنگاه به فایل فونت اشاره کنیم.

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

برای استفاده از فونت مذکور برای یک عنصر HTML، از نام (دلخواه) فونتی که انتخاب کرده ایم(myFirstFont) در ویژگی font-family استفاده می کنیم.

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

div {
  font-family: myFirstFont;
}

استفاده از متن پررنگ(bold)

برای اینکه متن ما به صورت پررنگ یا Bold نشان داده شود، باید از یک دستور دیگر در font-face@ استفاده کنیم:

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

فونت sansation_bold.woff یک فایل فونت دیگر است که حاوی کاراکترهای پر رنگ برای فونت Sansation است. مرورگرها وقتی که می خواهند بخشی از یک متن که از یک font-family استفاده می کند به صورت پررنگ(bold) نشان داده شود، از اینگونه فونت ها استفاده می کنند. به این طریق می توانیم برای یک فونت یکسان، تعداد زیادی دستور font-face@ داشته باشیم.