تصویر ثابت

پایگاه رسمی مهندس محسن اشکبوس

کارشناس ارشد طراحی سامانه های نرم افزاری تحت وب و شیرپوینت

پایگاه رسمی مهندس محسن اشکبوس

کارشناس ارشد طراحی سامانه های نرم افزاری تحت وب و شیرپوینت

آخرین نظرات

فونت های فارسی را به قالب سایتتان اضافه کنید(روش Fontface و Cufon)

اشکبوس محسن | دوشنبه, ۲۵ فروردين ۱۳۹۳، ۰۶:۲۵ ب.ظ

یکی از نیازهایی که اکثر طراحان وب با آن روبرو می شوند استفاده از فونت های فارسی برای سایتشان هست. برای همین تصمیم گرفتم تا 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 استفاده می کند پس ممکن است باعث تداخل هایی در سایت شود.

منبع : اُستوا

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی