Bifon

از Averta Wiki
پرش به: ناوبری, جستجو

محتویات

معرفی

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

نحوه استفاده از Bifon Font Generator

Bifon

این نرم افزار با دریافت یک فونت برای متون فارسی و یک فونت برای متون انگلیسی فایل خروجی ای به صورت javascript که همان فونت مورد استفاده در Bifon است را تولید می کند.

برای استفاده از این نرم افزار نیاز به داشتن آخرین نسخه Adobe Air است می توانید آن را از طریق www.Flashplayer.ir دریافت کنید.

این نرم افزار در سیستم عامل های Mac OS X ، Window و Linux قابل اجرا است.


شروع به کار

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 Text Converter

این بخش شامل یک ابزار به صورت javascript است که وظیفه تبدیل متن را قبل از نمایش توسط Cufon داراست.

برای نمایش متن در صفحه html نیاز به استفاده از ابزار Cufon است ، نحوه عملکرد بدین گونه است که فونت ساخته شده توسط Bifon Font Generator به ابزار Cufon داده می شود، سپس قبل از آن که فرآیند جایگزینی توسط Cufon انجام شود محتوای element های مورد نظر توسط Bifon Text Converter تبدیل می شوند.

جهت اطلاعات بیشتر در مورد نحوه عملکرد Cufon و دستورالعمل کامل استفاده از آن به صفحه این پروژه Cufon Project مراجعه کنید.

اجرای یک مثال

1 - پکیج کامل را از طریق صفحه بیفون در Averta Labs دریافت کنید.


2 - نرم افزار Bifon Font Generator را نصب کنید و بر اساس مراحل شرح داده شده در فوق، فونت مورد نظر خود را بسازید و با نام MyFont.js ذخیره کنید. در این مثال فرض شده است تمامی فایل ها مورد نیاز در یک پوشه قرار دارند.


3 - فایل های bifon-1.1b.min.js و cufon-1.10.min.js را که در پوشه js در پکیج دریافتی موجود است را در پوشه مثال خود کپی کنید.


4 - یک فایل HTML بسازید با محتوای استاندارد یک صفحه شامل تگ های html , body , head ,..


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 - سپس کد زیر را در ادامه کد فوق کپی کنید: 


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

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

برای انجام تبدیل متن توسط Bifon Text Converter نیاز است که تابع convert را که یک تابع در Bifon است ، مطابق کد فوق به onBeforeReplace ارجاء دهید.


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


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

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

* نکته : همان گونه که در css مثال مشخص است باید direction متن مورد نظر ltr تعریف شود. در نسخه 1.1b نیازی به این تغییر نیست.


8 - حال با تعریف یک h1 در body، متن مورد نظر خود را برای نمایش وارد می کنیم: 

<h1>این یک متن آزمایشی RTL است.</h1>

9 - در صورتی که تمامی مراحل را بدرستی انجام داده باشید می توانید نتیجه را در مرورگر خود ببینید.

نکات 


<script type="text/javascript">
Cufon.now();
</script>

لینک های مفید

1 - صفحه پروژه Bifon در Averta Labs

2 - صفحه پروژه Cufon در github

3 - صفحه Font generator ابزار Cufon جهت استفاده برای فونت های انگلیسی

4 - چند مثال از بیفون

برگرفته از «http://www.averta.net/wiki/fa/page/Bifon»
ابزارهای شخصی
گویش‌ها
فضاهای نام
عملکردها
گشتن
پروژه های لابراتوار
جعبه‌ابزار