آموزش پیوست فونت در CSS3

مهر ۱۴, ۱۳۹۱ توسط : رضا فرهادیان

در دنیای وب،مثل خیلی از جاهای دیگه به یکی از کمترین چیزایی که اهمیت داده شده،زبان فارسی هست!مثل GD(پیوست نوشته به عکس) که نمیتونه زبان فارسی رو پشتیبانی کنه(البته جدیدا عده ای از برنامه نویسان در حال برطرف کردن این مشکل هستند).در CSS3 هم متاسفانه فونت پیشفرض که زبان فارسی رو پشتیبانی کنه،فونت ARIAL هستش،البته فونت Tahoma هم هست که امروزه توسعه دهندگان وب فارسی از اون استفاده بیشتری میکنند اما باز هم احساس کمبود فونت فارسی با استانداردهای روز دنیا احساس میشه.همین مسئله باعث شده تا طراحان وب فارسی به شیوه های غیر استاندارد (استفاده نکردن از eot) روی بیارند که استانداردهای پیوست فونت به صفحه رو زیر پا میزاره.وقتی استفاده بیشتر از فونت در وب افزایش یافت،مرورگرها  تصمیم به پشتیبانی بیشتر از FONT-FACE گرفتند.فونت فیس یک ابزار CSS هست که به وسیله اون میشه فونت رو به جای دریافت از سیستم کاربر،از سرور دریافت کنه و دست طراحان رو برای استفاده از انواع فونت ها بازتر کنه.اما!اینجا بود که کابوس نسخه های پایین تر از ۹ اینترنت اکسپلورر ظاهر شدن!پیشنهاد میکنم مطلب دوست خوبم سعید راجب به CSS3 در IE رو بخونید.نسخه های پایینتر از ۹ مرورگر IE,تعداد بسیار زیادی از قابلیت های CSS3 رو پشتیبانی نمیکردند!این کابوس همچنان باقی مونده و طراحا هنوز براشون نوشتن کدها برای نسخه های پایینتر از ۹ مرورگر IE مشکله!برای نمایش صحیح فونت در مرورگر IE،شما احتیاج به تبدیل فونت TTF به EOT دارید که روی مرورگرهای زیر اجرا بشه:

البته ناگفته نماند که نسخه های جدید این مرورگر،از پشتیبانی بهتری نسبت به FF برخوردار هستند.وبسایت Kirsle سرویسی رو ارائه داده که به وسیله اون میشه فونت TTF رو به صورت آنلاین به EOT تبدیل کرد(لینک) که در اون صورت FONT FACE در +ie9 قابل اجرا میشه.برای استفاده از قابلیت فونت فیس،شما باید کد زیر رو در style.css قرار بدید،یا میتونید مستقیما در تگ style قرار بدید 🙂


@font-face
 {
 font-family: myFirstFont;
 src: url('Sansation_Bold.ttf'),
      url('Sansation_Bold.eot'); /* IE9+ */
 font-weight:bold;
 }

به جای myFirstFont میتوان از اسمی که برای فونت خود انتخاب کرده اید استفاده کرد.

برای استفاده از فونت انتخابیتون،کافیه اون رو در شیء STYLE که هرچیزی میتونه باشه قرار بدید،مثلا اگر در body قرار بدید،تقریبا فونت به کل صفحه پیوست میشه:


body{font-family:myFirstFont;}

پ.ن: اشتباهی که بیشتره طراحان وب فارسی مرتکب میشن،استفاده از کتشن (‘) یا دبل کتشن (“) هست،اگر شما در نام فونت انتخابی از این دو استفاده کردید،در هر جایی که میخواید اونا رو فرا بخونید باید از این دو استفاده کنید،اما خوب من در بالا از این دو استفاده نکردم 🙂 همیشه هم سعی کنید از فونت های پشتیبان استفاده کنید.

برگرفته از آموزشگاه کنسرسیون جهانی وب

استانداردها و قوانین FONT-FACE@

بازدید : ۳۶۷۴

سعید
مهر ۱۴, ۱۳۹۱ @ ۱۰:۵۳ ب.ظ

مرسی آقا رضا
خیلی عالیه.
آیا این تکنیک توی نسخه های مختلف IE جواب میده؟
و آیا این سایتی که لینکش رو دادی برای تبدیل فونتهای فارسی مشکلی نداره ؟

پاسخ دادن
رضا
مهر ۱۴, ۱۳۹۱ @ ۱۰:۵۵ ب.ظ

برای نسخه های بالاتر ۹ اینترنت اکسپلورر
بله،تنها سرویسی که فونت فارسی رو ساپورت میکنه همینه

پاسخ دادن
ایوب سیستم
مهر ۱۵, ۱۳۹۱ @ ۳:۲۵ ب.ظ

بازم سلام . یه سایت در ایم زمنیه دیدم که یه مقاله داشت . ولی مقاله اش مد نظرم برا این نظر نیست – فقط حدود ۴۰ تا فونت فارسی رو تبدیل کرده که به کار دوستان حتما می یاد.
http://www.wedesign.ir/css/css3-font-face-methods-and-optimized-font-firefox6

ارادت.

پاسخ دادن
    سعید
    مهر ۱۵, ۱۳۹۱ @ ۳:۵۲ ب.ظ

    سلام
    ممنون برای معرفی لینک

    پاسخ دادن
    مهر ۱۵, ۱۳۹۱ @ ۴:۱۷ ب.ظ

    ممنون،الان رفتم توی همون سایتی که بالا گفتید،مثل اینکه یه ابزار فارسی برای اینکار هم اومده:
    http://averta.net/labs/fa/?p=10

    پاسخ دادن
erfan
آذر ۱, ۱۳۹۱ @ ۴:۳۸ ب.ظ

عالی بود
دستت درد نکنه

پاسخ دادن
faezeh
مهر ۲۴, ۱۳۹۳ @ ۱۰:۵۰ ق.ظ

سلا م..ممنون از سایتتون من از همین روش اسفاده کردم در کروم و ie درست نمایش میده اما با فایر فاکس اجرا نمی شه… ممنون میشم کمکم کنید.
@font-face {
font-family: kamran;
src: url(‘../font/Persian-Kamran.eot?#’) format(‘eot’), /* IE6–۸
url(‘../font/Persian-Kamran.woff’) format(‘woff’), /* FF3.6+, IE9, Chrome6+, Saf5.1 */
url(‘../font/Persian-Kamran.ttf’) format(‘truetype’); /* Saf3—۵, Chrome4+, FF3.5, Opera 10+ */}

پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*