دست نوشته های خودم

همه درددلها ، حرفها و یادداشتهای خودم …
فونت های دلخواه در صفحات وب
نویسنده:
۹ اردیبهشت ۹۱

واسه وب دیزانرها (Web Designers) خیلی پیش میاد که با خودشون میگن ، کاش میشد از فونت فارسی خاصی برای سایت استفاده کنیم. حتما میدونید که سیستم عامل ها ، به صورت پیش فرض ، فونتهای خاص منظوره ما رو ندارند. مثلا فونت B Nazanin که یک فونت معروف فارسی هست رو باید بعد از راه اندازی سیستم عامل ، نصب کنید.

خوشبختانه راه حل خوبی برای این مساله پیدا شده. راه حل به شرح زیر است :

۱ – ابتدا به اینجا وصل شده و فونت مورد نظر خودتون رو به استاندارد مخصوص استفاده در وب تبدیل کنید. (تصویر شماره یک)  در این قسمت ، امکان انتخاب با گزینه Add Font File به شما داده میشه. بعد از زدن کلید ، یک فایل زیپ به شما داده میشه. (تصویر شماره ۲) – در فایل زیپ حاصل ، تعدادی فایل می بینید که برای استفاده از فونت مورد نظر به شما داده شده است. (تصویر شماره ۳) در واقع این فایلها  ، فونت های شما هستند که ازش استفاده خواهید کرد.

تصویر شماره یک

تصویر شماره دو

تصویر شماره ۳

۲ – فونت ها را به روی سایت خودتون منتقل کنید و آدرس اون رو مد نظر داشته باشید.

۳ – کد CSS تولید شده مخصوص استفاده از فونت در فایل Stylesheet.css هست که اون رو باید توی فایل CSS اصلی سایتتون بزارید !!! من نمونه اون کد رو اینجا گذاشتم براتون (البته دقت کنید که URL رو باید درست بزنید ، یعنی همون آدرسی رو که گفتم بهتون رو باید قبل از اسم فایلتون قرار بدید در کدهای زیر

@font-face {
font-family: ‘BNazaninRegular’;
src: url(‘bnazanin-webfont.eot’);
src: url(‘bnazanin-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘bnazanin-webfont.woff’) format(‘woff’),
url(‘bnazanin-webfont.ttf’) format(‘truetype’),
url(‘bnazanin-webfont.svg#BNazaninRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;

۴ – سپس در هر جایی که میخواین از فونت استفاده کنید .باید کد زیر رو قرار بدید

font-family: b nazanin

۵ – اینجا ، یک سایت موقتی و الکی هست که من صرفا برای تست همین مورد ، ساختمش ! می بینید که از نازنین به راحتی استفاده میکنه ، چه روی سیستم کلاینت ، فونت نازنین باشه چه نباشه !

Facebooktwittergoogle_pluslinkedinmail

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *