Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

استفاده فونت فارسی در وب (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';

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

سلام چطوری میشه یه متنی که توی کد جاوا هست رو فونت بدم؟
پاسخ : اسماعیل : خب معمولاً شما وقتی در مورد متن صحبت میکنید ، باید یه id باشه که متن رو درونش به نمایش در بیارین...خب شما اگه css بلد باشین میتونین به اون id خاص فونت دلخواه رو بدین...ولی در هر حال بازم اگه مشکلتون حل نشد تاپیک بزنین...
با تشکر
thanks a lot!
سلام
نماز و روزه هاتون قبول حق
باتوجه به مطلبی که خوندم شوالی داشتم!
ببخشید من اگر فونتهای دلخواهم رو به همراه قالب بلاگفایی که دارم در اختیارتون قرار بدم,میتونید لطف کنید این فونتها رو روی قالب بذارید؟؟؟؟؟؟
هرچقدر هزینه داشته باشه میپردازم
ممنون
لطفا خبرم کنید
پاسخ : در انجمن درخواست کنید.

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36560
افراد آنلاین : 3
بازدید امروز : 763
بازدید دیروز : 4,096
گوگل امروز : 97
گوگل دیروز : 112
بازدید هفته : 7,229
بازدید ماه : 31,077
بازدید سال : 278,047
بازدید کلی : 10,672,523