جدیدترین مطالب

واگرا سیستم تبلیغ در تلگرام و مدیریت کانال تلگرام

واگرا سیستم تبلیغ در تلگرام و مدیریت کانال تلگرام

امروزه کانال های تلگرام محبوبیت زیادی بین کاربران اینترنت پیدا کرده اند. اما اگر از…

ادامه مطلب

دانلود جدیدترین نسخه تلگرام و تلگرام فارسی

دانلود جدیدترین نسخه تلگرام و تلگرام فارسی

تلگرام یک ابزار پیام رسانی سریع و ایمن بوده که در بین کاربران فارسی زبان…

ادامه مطلب

معرفی کانال های برتر تلگرام در ایران

معرفی کانال های برتر تلگرام در ایران

با فعالیت روز افزون تلگرام در ایران و گسترش آن کانال های تلگرامی روز به…

ادامه مطلب

آموزش بورس در 20 دقیقه

آموزش بورس در 20 دقیقه

در این مطلب آموزش بورس در 20 دقیقه را به صورت پاورپوینت نمایشی برایتان آماده…

ادامه مطلب

آینده وب در دستان پیام رسان هایی مثل تلگرام!

آینده وب در دستان پیام رسان هایی مثل تلگرام!

در ادامه این مطلب سعی خواهیم کرد به پیش بینی آینده وب بپردازیم. اینکه وب…

ادامه مطلب

اعتراض یک طراح وب برای اتمام جنگ (معرفی سایت)

اعتراض یک طراح وب برای اتمام جنگ (معرفی سایت)

چند روزی هست که توی تمامی رسانه ها شاهد این هستیم که بازهم جنگ توی…

ادامه مطلب

15 طرح اولیه (sketch) در طراحی لوگو

15 طرح اولیه (sketch) در طراحی لوگو

طراحی لوگو ممکن است به سادگی چیزی که ما در نگاه اول به آن پی…

ادامه مطلب

7 افزونه جی کوئری برای بهبود فرم های html

7 افزونه جی کوئری برای بهبود فرم های html

فرم ها جزء مهم ترین بخش های یک وب سایت می باشد. زیبایی فرم ها،…

ادامه مطلب

5 وب سایت که با اسکرول شان داستان تعریف می کنند!

5 وب سایت که با اسکرول شان داستان تعریف می کنند!

در این مطلب به معرفی چند وب سایت جذاب می پردازیم که با اسکرول ویژه…

ادامه مطلب

دانلود آیکون های تخت - سری سوم

دانلود آیکون های تخت - سری سوم

همانطور که قبلا درباره ی آیکــون ها بحث کرده ایم، این بار سری جدیدی از آیکون…

ادامه مطلب

10 صفحه 404 جذاب و خلاقانه

10 صفحه 404 جذاب و خلاقانه

همانطور که در مطالب قبل در رابطه با صفحات 404 گفتیم، اینگونه صفحات که از…

ادامه مطلب

خداحافظ SEO , سلام بر SMO

خداحافظ SEO , سلام بر SMO

مدت زمان زیادی است که مفهوم بهینه سازی وب سایت ها برای موتورهای جستجو (SEO)…

ادامه مطلب

محبوب های ماه



 

مفتخریم به اطلاع برسانیم سایت استــــوا با شعار دور دنیای وب در یک سایت شروع به کار کرده است. این سایت با...


جمعه, 03 آبان 1392 ساعت 05:04

فونت های فارسی را به وب سایت خود اضافه کنید مطلب ویژه

نوشته شده توسط 
امتیاز دهید
(1 امتیاز)

یکی از نیازهایی که اکثر طراحان وب با آن روبرو می شوند استفاده از فونت های فارسی برای سایتشان هست. برای همین تصمیم گرفتم تا 2 روش موجود برای این کار را به صورت خلاصه و مفید برایتان بنویسم تا بتوانید سایت خود را زیباتر از قبل داشته باشید. این دو روش عبارتند از font face و روش cufon .

روش fontface@ :

این روش با استفاده از css3 اقدام به بارگذاری فونت در صفحات وب می کند. پس باید فونت ها را در فایل css قالب خودتان فراخوانی نمایید. این روش را با جزئیات کامل برایتان در چند مرحله توضیح می دهم:

 

قدم اول : ابتدا این فایل را دانلود کنید. این فایل حاوی تمام موارد مورد نیاز برای استفاده از این روش می باشد.در این فایل 40 فونت فارسی اصلاح شده موجود می باشد.

قدم دوم : فونت های مورد نظر خود را از داخل فایل موجود انتخاب نمایید. دقت نمایید که برای هر فونت سه نوع فرمت .eot (برای مرورگر IE ) و .ttf (برای بقیه مرورگرها) و .woff (که فایل فونت با حجم کمتر می باشد) وجود دارد که باید هر سه را انتخاب کرده و داخل پوشه fonts درقالب خودتان آپلود کنید.

قدم سوم : کد css زیر رو در سطر اول فایل css قالب خودتون paste کنید. دقت کنید که اگر در وسط فایل css قالبتون جایگذاری کنید فونت ها فقط به سطرهای زیرین اعمال خواهند شد. پس بهتر است که این کد را در سطر اول جایگزین کنید تا هر کجا که لازم شد بتوانید از فونت های مورد نظر خود استفاده کنید.

@font-face {
    font-family: 'byekan’;
    src:url('fonts/byekan.eot?#’) format(‘eot’),    
          url('fonts/byekan.woff') format('woff'),
          url(‘fonts/byekan.ttf’) format(‘truetype’); 
}

توضیح کد: نحوه عملکرد کد این گونه است که در مرورگر IE تنها خط اول را می بیند و تنها فایل EOT را دریافت می ‌کند(زیرا از هک ?# استفاده کرده ایم و در غیر این صورت از این سطر رد می شد و سطر دوم را می دید و فرمت ttf را نمی توانست نشان بدهد) در حالی که مرورگرهای دیگر خط اول را نادیده گرفته و خط دوم رو می‌خوانند و فونت TTF را دریافت می‌کنند. حال برای مرورگرهای جدیدتر از فرمت WOFF هم استفاده می‌کنیم تا کاربرانی که از این مرورگرها استفاده می‌کنند، فایل کم حجم تری را دریافت کنند. در این حالت، صفحه با سرعت بیشتری برای این کاربران باز می‌شود.

قدم چهارم: کار تمام است. حال هرجا لازم شد کافی است در فایل css قالبتان کد زیر را قرار دهید تا فونت آن قسمت به فونت مورد نظر شما تغییر کنید:

h1{
   font-family: 'byekan';
   font-size: 14px;
   font-weight:bold;
}

روش cufon برای فونت های فارسی :

استفاده از cufon یکی دیگر از روش ها برای افزودن فونت به وب سایت می باشد که تا چندی پیش فونت های فارسی را پشتیبانی نمی کرد و به همین خاطر از چشم طراحان سایت به دور مانده است. در این روش فونت ها تبدیل به فایل های جاوااسکریپت شده و در سایت نمایش داده می شوند. گروه آورتا ابزار bifon را برای سازگاری فونت های فارسی با روش cufon ارائه کرده است.

  بیفون ابزاری است برای نمایش متون فارسی به همراه انگلیسی با فونتی غیر از فونت های استاندارد در صفحات HTML . این ابزار مکملی است بر روی Cufon و بدون هیچ وابستگی به پلاگین امکان نمایش هر فونتی را در تمامی مرورگر ها فراهم می کند.

 

 

نحوه استفاده از بیفون را در چند مرحله زیر برایتان توضیح می دهم:

قدم اول : ابتدا این فایل را دانلود کنید. این فایل تمام نیازهای شما را در این آموزش برطرف خواهد کرد.

قدم دوم: فایل Bifon Font Generator.air را اجرا و نصب کنید (نرم افزار bifon بر پایه Adobe air برنامه نویسی شده به همین دلیل برای اجرای اون حتما لازم هست که این نرم افزار بر روی کامپیوتر شما نصب باشه ، در صورتی که این نرم افزار رو ندارین بر روی این لینک کلیک کنید تا نرم افزار مورد نظر را دریافت کنید )

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

1- فونت فارسی مورد نظر خود را با کلیک بر روی Browse (شماره 1 در تصویر) انتخاب کنید.

2 - فونت انگلیسی مورد نظر خود را با کلیک بر روی Browse ( شماره 2 در تصویر) انتخاب کنید.

3 - در صورتی که می خواهید برای حروف انگلسی، از فونت فارسی استفاده شود، می تواند گزینه "Use Persian font as English Font too" (شماره 3 در تصویر) را انتخاب کنید.

4 - نام فونت فارسی ای را که در مرحله اول انتخاب کرده اید از لیست "Persian font family" (شماره 4 در تصویر) انتخاب کنید. (دقت کنید که فونت مورد نظر باید در سیستم خود شما هم نصب باشد)

5 - از طریق "Including following glyphs" (شماره 5 در تصویر) می توانید مشخص کنید که فونت خروجی شامل چه نوع کاراکتر ها ای باشد ، با حذف انتخاب هر یک از گزینه ها، آن کاراکتر ها در فونت ثبت نخواهند شد. حذف هر گزینه باعث کاهش یافتن حجم فونت خروجی می شود.

6 - "Use English font for Numerals" (شماره 6 در تصویر) در صورت انتخاب این گزینه نرم افزار برای کاراکتر های عددی ( 0 1 2 3 4 .. ) از فونت انگلیسی استفاده می کند.

7 - "Use English font for Punctuation" (شماره 7 در تصویر) در صورت انتخاب این گزینه نرم افزار برای کاراکتر های نشانه ( ! @ $ % .. ) از فونت انگلیسی استفاده می کند.

8 - "Font Scale" (شماره 8 در تصویر) مقدار عددی ای که برای این گزینه وارد می شود مشخص کننده مقدار بزرگ نمایی حروف در زمان ساخت فونت در نرم افزار است ، هر چه مقدار وارد شده بیشتر باشد کیفیت فونت خروجی افزایش می یابد و این امر باعث افزایش حجم فونت نیز می شود ، مقادیر کمتر از 256 توصیه نمی شود.

9 - "Font Family" (شماره 9 در تصویر) مشخص کننده نام فونت در فایل فونت خورجی و مولفه دسترسی به فونت در CSS است. در صورت نیاز می توانید نام دیگری برای آن مشخص کنید.

10 - "kerning" (شماره 10 در تصویر) با انتخاب این گزینه فونت خروجی کیفیت بهتری خواهد داشت و کمی حجم فایل فونت را افزایش می دهد.

11 - "JS Function" (شماره 11 در تصویر) در صورت نیاز می توانید تابع خود را برای دریافت فونت تعریف کنید . مقدار پیش فرض باید "Cufon.registerFont" باشد.

12 - "Limit Domains" (شماره 12 در تصویر) در صورتی که می خواهد استفاده از فونت را محدود به دامنه یا دامنه های خود کنید می توانید نام دامنه را وارد کنید ، اگر از فونت تجاری استفاده می کنید توصیه می شود این گزینه را پر کنید. برای استفاده در چند دامنه می توانید نام دامنه ها را با , از هم جدا کنید.

13 - پس از انجام موارد فوق با کلیک بر Generate (شماره 13 در تصویر) روی مراحل ساخت فونت آغاز می شود و دکمه به Cancel تغییر نام می دهد .

14 - پس از انجام مراحل ساخت فونت دکمه Cancel به Save تغییر نام می دهد. بر روی آن کلیک کرده و در پنجره ذخیره سازی محل مورد نظر و نام فایل فونت را مشخص کنید، توجه داشته باشید که پسوند js. را در نام فونت وارد کنید. مثال:font.js

قدم چهارم : حال فونت ما با فرمت جاوااسکریپت آماده شده است و کافی است آن را به فایل های قالب خود اضافه نماییم. برای این کار ابتدا سه فایل : bifon-1.1b.min.js و cufon-1.10.min.js (موجود در فایلی که دانلود کردید) و font.js (فونتی که ساخته اید) را به پوشه js قالب خودتان(یا هرپوشه دیگری) آپلود کنید.

قدم پنجم : حال باید این فایل های جاوااسکریپت را در فایل قالب خودتان فراخوانی کنید. پس با کپی کردن کد زیر در تگ head فایل قالب خود، فایل های مورد نیاز را پیوست کنید:

<script src="cufon-1.10.min.js" type="text/javascript"></script>
<script src="bifon-1.1b.js" type="text/javascript"></script>
<script src="MyFont.js" type="text/javascript"></script>

قدم ششم : حال می بایست مشخص کنیم که از این فونت در کجای قالب (مثلا h1 ) استفاده شود. پس کد زیر را در ادامه ی کد فوق پیوست کنید:

<script type="text/javascript">
Cufon.replace('h1', {onBeforeReplace:Bifon.convert});
</script>

همانطور که در نمونه کد بالا مشخص است ، یک جایگزینی برای تگ "h1" به وسیله تابع replace برای Cufon تعریف شده است. تابع replace دارای پارامتر options است که می توانید لیست کامل آن را در این صفحه مشاهده کنید. در این مثال برای نمایش متن فارسی نیاز به گزینه onBeforeReplace در options است. برای انجام تبدیل متن توسط Bifon Text Converter نیاز است که تابع convert را که یک تابع در Bifon است ، مطابق کد فوق به onBeforeReplace ارجاء دهید.

قدم هفتم و آخر: کد زیر که شامل css برای تعریف فونت بر روی "h1" است را در head کپی کنید:

<style type="text/css">
h1 {
font: normal 30px "Font1", Arial, Verdana, Helvetica, sans-serif;
direction:rtl;
}
</style>

همانطور که در css مشخص شده است فونتی با نام Font1 برای h1 در نظر گرفته شده، Font1 نامی است که در نرم افزار bifon برای فونت خروجی تعریف شده است.

مقایسه دو روش font face و bifon :

همون طور که مشاهده کردید استفاده از font face بسیار راحت تر از cufon می باشد. font face بخاطر اینکه از css3 استفاده می کند در مرورگرهای قدیمی پشتیبانی نمی شود. تعداد فونت های اصلاح شده برای font face محدود است(فعلا 40 فونت) در حالیکه در cufon می توانیم هر نوع فونتی را استفاده کنیم. مزیت دیگر cufon ترکیب دو نوع فونت فارسی و انگلیسی می باشد. cufon بخاطر اینکه از javascript استفاده می کند پس ممکن است باعث تداخل هایی در سایت شود.

 

بازدید 8226 بار
سعید نجفی

سعید نجفی هستم. مدیر ارشد سایت استوا. فیلد تخصصی ام برق هستش ولی در کنار اون علاقه زیادی به دنیای وب دارم. استوا رو استارت زدیم با هدف جمع آوری مطالب روز دنیای وب! با ما همراه باشید.

در صورت وجود هرگونه سوال و انتقاد و پیشنهادی با ما تماس بگیرید.

وب سایت: www.saeednajafi.ir

نظر خود را اضافه کنید

0

نظرات (11)

بارگذاری نظرات قدیمی تر
  • حسین

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

  • سلام حسین عزیز
    این که این فایل شما دقیقا کجا هست و اسمش چیه بستگی به قالبی که خریدین داره. معمولا توی قالب ها پوشه ای هست به نام css که داخل اون پوشه فایل هایی با فرمت .css وجود داره مثلا فایلهایی به این اسم template.css
    با توجه به اینکه مبتدی هستید ساده ترین راه حلی که می تونم به شما پیشنهاد بدم اینه که فایل های با فرمت css رو پیدا و این کد @fontface رو در ابتدای تمام این فایل ها قرار بدید.
    بله برای ویرایش فایل های css می تونید از نرم افزار dreamweaver استفاده کنید. پیشنهاد من استفاده از نرم افزار notepad++ هست که بسیار هم ساده و سریع هست.

  • آرش

    ممنون بخاطر انتشار این مطلب کاربردی،
    برای همراهی با مطلب خوبتان من یک ابزار برای طراحان فارسی زبان به این لیست اضافه میکنم:
    سایت تولید کننده لورم ایپسوم فارسی
    http://www.loremipsum.ir

عضویت در خبرنامه ایمیلی و پیامکی

خبرنامه ایمیلی و پیامکی
نام (*)
ورودی نامعتبر
ایمیل (*)
ورودی نامعتبر
دریافت موارد (*)
لطفا موارد دلخواه خودت را انتخاب کن.
نام خانوادگی (*)
ورودی نامعتبر
شماره موبایل
شماره موبایل خود را بدون صفر وارد کنید.