جستجو  

کدهای کمکی در ساختار کلی نیوک , استفاده از انواع فونت فارسی در وب سایت


سلام

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

ذکر چند نکته خالی از لطف نیست :

1. بهترين روش و مناسب‌ترين فونت براي سايتهاي غير تخصصي (يعني سايتهاي معمول)، استفاده از فونت tahoma است ـ

2. استفاده از فونت مستقل، موجب دیرتر لود شدن وبگاه شما خواهد شد و این بستگی به حجم فونتی دارد که بکار ببرید؛ مثلاً اگر فونت شما صد کیلو بایت حجم داشته باشد، به این می‌ماند که یک تصویر پانصد کیلو بایتی به صفحه وب خود افزوده باشید.

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

فونت مورد نظرتان را از آدرس ارائه شده در انتهای همین آموزش انتخاب کنید. فونتهای معرفی شده در این آموزش کاملاً استاندارد شده و تست شده هستند و روی همه مرورگرها به خوبی اجرا شده اند.

1. حالا باید فونت مورد نظرتان را به فرمتهای EOT و OTF و WOFF و SVG تغییر فرمت دهید. فرض کنیم فونت انتخابی ، فونت یکان (B Yekan) باشه.

2. فونت مورد نظرتان را به فرمتهای EOT و OTF و WOFF و SVG تغییر فرمت دهید. برای تغییر فرمت این فونت، نرم افزار خاصی (فعلاً) موجود نیست اما سایتهای زیادی هستند که این کار را (بطور رایگان) برایتان انجام می‌دهند. البته هر کدام از این سایتها، محاسن و معایبی دارند؛ یعنی برخی‌شان فرمت WOFF را بخوبی تولید می‌کنند و برخی‌شان فرمت SVG را؛ لذا شما باید هر یک از فرمتها را در سایت خاصی تغییر دهید. مطمئن ترین سایتها برای تبدیل فرمت فونت: سایت زیر، (در سطع عالی) فرمت TTF را به فرمت EOT تبدیل می‌کند:

http://www.kirsle.net/wizards/ttf2eot.cgi

سایت زیر، فرمتهای بسیاری را به یکدیگر تبدیل می‌کند اما شما فایل TTF را فقط به فرمتهای OTF و SVG تبدیل کنید و بقیه را صرف نظر کنید:

http://www.freefontconverter.com/

سایت زیر، پس از دریافت فایل TTF تمامی فرمتهای لازم را در یک فایل زیب به شما تحویل می‌دهد، اما شما تنها فرمت WOFF را از آن بردارید و بقیه را رها کنید:

http://www.font2web.com/

3. پس از انجام دستورات فوق، شما یک فونت TTF بعلاوه ی چهار فرمت دیگر از همان فونت را دارید:

BYekan.ttf - BYekan.eot - BYekan.otf - BYekan.svg - BYekan.woff

4. اکنون این پنج فونت را درون یک فولدر با نام دلخواه، مثلاً (Fonts) قرار دهید.

5. یک نوت پد را باز کنید و کد زیر را درون آن بنویسید.

@font-face {
    font-family: 'BYekan';
    src: url('BYekan.eot'); /* IE9 Compat Modes */
    src: url('BYekan.eot?#') format('eot'), /* IE6–8 */
    url('BYekan.ttf') format('truetype'), /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
    url('BYekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('BYekan.otf') format('opentype'),
    url('BYekan.svg') format('svg');
    font-variant: normal;
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: BYekan, Tahoma, Arial, sans-serif;
    font-size: inherit;
}


6. پس از آنکه کد بالا را درون آن NotePad نوشتید، آن را با هر نام دلخواه، ولی با پسوند CSS ذخیره کنید؛ مثلاً (Farsi.css).

7. این فایل (Farsi.css) را نیز درون فولدر (Fonts) قرار دهید.

8. فایل (Farsi.css) را در قسمت Head صفحه ی HTML مورد نظر فراخوانی کنید ـ مثال:

<link rel="stylesheet" type="text/css" href="Fonts/Farsi.css" />

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

شما میتوانید با مراجعه به سایت http://awebfont.ir/fonts هر فونتی که مایل بودید را دانلود کرده و با آموزش بالا از آن استفاده کنید.

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

موفق و مؤید باشید.