فونت دلخواه من - قسمت دوم - استفاده فونت فارسی در وب (font-face@)

در نوشته قبلی درباره سرویس فونت گوگل بحث کردیم . اما در این پست می خواهیم به این نتیجه برسیم که نیاز چندانی هم به این سرویس نداریم.
در این نوشته خواهید آموخت :
- چگونه از فونت های فارسی در وب استفاده کنیم .
- آماده سازی فونت برای وب .
- نوشتن دستورات برای تمام مروگرها ( حتی IE6 ) .

چرا می خواهیم از این دستور و یا  اصولا از این روش استفاده کنیم ؟
همان طور که می دانید فونت های فارسی ایمن ( موجود در تمام کامپیوتر ها ) محدود به دو فونت arial و Tahoma است. و اگر بخواهید از یک متن را با فونتی خواص نشان دهید   مجبور هستید یا از عکس استفاده کنید یا اینکه از جاوا اسکریپت و یا فلش کمک بگیرید که مطمئنا حجم بالایی از داده را به سایت تحمیل می کنند و در ضمن مسئله پشتیبانی از تمام مرورگرها ( cross browser ) هم وجود دارد .
اما ما امروز با css  به راحتی این کار را بهتر و سریع تر انجام می دهیم همچنین حجم داده کمتری بر سایت اضافه می شود .
خوب حالا که به فواید این کار پی بردید به سراغ مرحله اول می رویم . ساختار کلی دستور :

@font-face {

 font-family: Graublauweb;

 src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */

 src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */

 url('Graublauweb.woff') format('woff'), /* Modern Browsers */

 url('Graublauweb.ttf') format('truetype'), /* Safari, Android, iOS */

 url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */

}

همان طور که در کد هم مشخص است دلیل چند دستور شدن این مشخصه وجود مرورگر های مختلف با سینتکس های متفاوت است .
حالا به سراغ بررسی کد می رویم :
خط اول کد شروع دستور است و خط دوم ما نام صورت فونتی که می خواهیم ایجاد کنیم می نویسیم . ( اسم دلخواه ) و پنچ خط بعدی کار یکسانی انجام می دهند البته در موررگر های متفاوت تاثیر دارند.
خب با دیدن این همه فایل این سوال پیش ما آید که چگونه این ها را بدست آوریم  ؟
مثل همیشه یک راه میان بر وجود دارد ! و آن هم سایت @font-face Kit Generator است
ابتدا باید دکمه add Fonts  را زده تا فونت ها آپلود شوند . سپس شما فونت ها در کادر زیر دکمه مشاهده می کنید .  در اینجا من فونت هما را انتخاب کرده ام . در مرحله بعد می توانید کد خروجی را به میل خود تغییر دهید . من مدل بهینه (optimal ) را انتخاب کرده ام . در نهایت با زدن تیک Agreement  دکمه دانلود فعال می شود . بعد از زدن دکمه download your kit  سایت به شما یک فایل فشرده (zip ) می دهد .  اما محتویات این فایل چیست :
فونت مورد نظر شما در تمامی فرمت های لازم ( eot  , ttf  , woff  svg  )
یک فایل css و html  که حاوی نمونه استفاده از فونت شماست .
کد css  مورد نیاز ما در stylesheet.css  است . محتویات این فایل را در فایل css  خود کپی کنید .البته بدیهی است که فونت ها را نیز باید به محل سایت خود منتقل کنید .

@font-face {

 font-family: 'BHomaRegular';

 src: url('bhoma-webfont.eot');

 src: url('bhoma-webfont.eot?#iefix') format('eot'),

 url('bhoma-webfont.woff') format('woff'),

 url('bhoma-webfont.ttf') format('truetype'),

 url('bhoma-webfont.svg#webfontI05wzgXm') format('svg');

 font-weight: normal;

 font-style: normal;

}

خب قدم بعدی چیست ؟!  لذت بردن از استفاده از این کد ! .
برای استفاده فقط کافی است به تکی که می خواهید متن آن با این فونت نمایش داده شود این کد css  را اضافه کنید   :

font-family: 'BHomaRegular';

امیدوارم پست مفیدی بوده باشد . منتظر نظرات شما برای بهبود نوشته های آینده هستم .