یکی از نیازهایی که اکثر طراحان وب با آن روبرو می شوند استفاده از فونت های فارسی برای سایتشان هست. برای این کار دو روش وجود دارد که در ادامه توضیح خواهیم داد :
روش fontface@ :
در این روش با css3 فونت های مورد نظرتان را می توانید به قالب سایتتان اضافه کنید. ابتدا باید فونت مورد نظرتان را با 3 فرمت eof برای مرورگر (IE) و ttf برای بقیه مرورگرها و woff که با حجم پایین است را داشته باشید. (در پایین صفحه مجموع 40 فونت مشهور با فرمت های لازم موجود است)
کد 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’);
}
حالا می توانید هرجایی در فایل css قالبتان کد زیر را قرار دهید تا فونت آن قسمت به فونت مورد نظر شما تغییر کنید:
h1{
font-family: 'byekan';
font-size: 14px;
font-weight:bold;
}
روش cufon برای فونت های فارسی :
استفاده از Cufon یکی از روش های افزودن فونت های فارسی به صفحه وب می باشد. این روش بر خلاف fontface@ مشکلی در نمایش نوشته های فارسی در سایزهای 13 تا 17 پیکسل به وجود نمی آورد به همین دلیل مورد استقبال طراحان سایت قرار گرفته است...
در این روش فونت ها ابتدا تبدیل به جاوااسکریپت شده و سپس در صفحه وب نمایش داده می شود.
نحوه استفاده از بیفون
گام 1- ابتدا این فایل را از
اینجا دانلود کنید.
گام 2- فایل Bifon Font Generator.air را اجرا و نصب کنید (نرم افزار bifon بر پایه Adobe air برنامه نویسی شده به همین دلیل برای اجرای اون حتما لازم هست که این نرم افزار بر روی کامپیوتر شما نصب باشه ، در صورتی که این نرم افزار رو ندارین بر روی این
لینک کلیک کنید تا نرم افزار مورد نظر را دریافت کنید )
گام 3- پس از نصب ، نرم افزار بیفون را باز کنید. با محیط زیر روبرو خواهید شد که هر قسمت بطور کامل توضیح داده شده :
۱ – فونت فارسی مورد نظر خود را با کلیک بر روی Browse (شماره ۱ در تصویر) انتخاب کنید.
۲ – فونت انگلیسی مورد نظر خود را با کلیک بر روی Browse ( شماره ۲ در تصویر) انتخاب کنید.
۳ – در صورتی که می خواهید برای حروف انگلسی، از فونت فارسی استفاده شود، می تواند گزینه “Use Persian font as English Font too” (شماره ۳ در تصویر) را انتخاب کنید.
۴ – نام فونت فارسی ای را که در مرحله اول انتخاب کرده اید از لیست “Persian font family” (شماره ۴ در تصویر) انتخاب کنید. (دقت کنید که فونت مورد نظر باید در سیستم خود شما هم نصب باشد)
۵ – از طریق “Including following glyphs” (شماره ۵ در تصویر) می توانید مشخص کنید که فونت خروجی شامل چه نوع کاراکتر ها ای باشد ، با حذف انتخاب هر یک از گزینه ها، آن کاراکتر ها در فونت ثبت نخواهند شد. حذف هر گزینه باعث کاهش یافتن حجم فونت خروجی می شود.
۶ – “Use English font for Numerals” (شماره ۶ در تصویر) در صورت انتخاب این گزینه نرم افزار برای کاراکتر های عددی ( ۰ ۱ ۲ ۳ ۴ .. ) از فونت انگلیسی استفاده می کند.
۷ – “Use English font for Punctuation” (شماره ۷ در تصویر) در صورت انتخاب این گزینه نرم افزار برای کاراکتر های نشانه ( ! @ $ % .. ) از فونت انگلیسی استفاده می کند.
۸ – “Font Scale” (شماره ۸ در تصویر) مقدار عددی ای که برای این گزینه وارد می شود مشخص کننده مقدار بزرگ نمایی حروف در زمان ساخت فونت در نرم افزار است ، هر چه مقدار وارد شده بیشتر باشد کیفیت فونت خروجی افزایش می یابد و این امر باعث افزایش حجم فونت نیز می شود ، مقادیر کمتر از ۲۵۶ توصیه نمی شود.
۹ – “Font Family” (شماره ۹ در تصویر) مشخص کننده نام فونت در فایل فونت خورجی و مولفه دسترسی به فونت در CSS است. در صورت نیاز می توانید نام دیگری برای آن مشخص کنید.
۱۰ – “kerning” (شماره ۱۰ در تصویر) با انتخاب این گزینه فونت خروجی کیفیت بهتری خواهد داشت و کمی حجم فایل فونت را افزایش می دهد.
۱۱ – “JS Function” (شماره ۱۱ در تصویر) در صورت نیاز می توانید تابع خود را برای دریافت فونت تعریف کنید . مقدار پیش فرض باید “Cufon.registerFont” باشد.
۱۲ – “Limit Domains” (شماره ۱۲ در تصویر) در صورتی که می خواهد استفاده از فونت را محدود به دامنه یا دامنه های خود کنید می توانید نام دامنه را وارد کنید ، اگر از فونت تجاری استفاده می کنید توصیه می شود این گزینه را پر کنید. برای استفاده در چند دامنه می توانید نام دامنه ها را با , از هم جدا کنید.
۱۳ – پس از انجام موارد فوق با کلیک بر Generate (شماره ۱۳ در تصویر) روی مراحل ساخت فونت آغاز می شود و دکمه به Cancel تغییر نام می دهد .
۱۴ – پس از انجام مراحل ساخت فونت دکمه Cancel به Save تغییر نام می دهد. بر روی آن کلیک کرده و در پنجره ذخیره سازی محل مورد نظر و نام فایل فونت را مشخص کنید، توجه داشته باشید که پسوند js. را در نام فونت وارد کنید. مثال:font.js
گام 4- حال فونت ما با فرمت جاوااسکریپت آماده شده است و کافی است آن را به فایل های قالب خود اضافه نماییم. برای این کار ابتدا سه فایل : bifon-1.1b.min.js و cufon-1.10.min.js (موجود در فایلی که دانلود کردید) و font.js (فونتی که ساخته اید) را به پوشه js قالب خودتان(یا هرپوشه دیگری) آپلود کنید.
گام 5- حال باید این فایل های جاوااسکریپت را در فایل قالب خودتان فراخوانی کنید. پس با کپی کردن کد زیر در تگ 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>
گام 6- حال می بایست مشخص کنیم که از این فونت در کجای قالب (مثلا h1 ) استفاده شود. پس کد زیر را در ادامه ی کد فوق پیوست کنید:
<script type="text/javascript">
Cufon.replace('h1', {onBeforeReplace:Bifon.convert});
</script>
گام 7- کد زیر که شامل css برای تعریف فونت بر روی “h1″ است را در head کپی کنید :
<style type="text/css">
h1 {
font: normal 30px "Font1", Arial, Verdana, Helvetica, sans-serif;
direction:rtl;
}
</style>