استفاده از فونت دلخواه در css

تا قبل از css3 استفاده از فونت های به جز فونت های نصب شده در سیستم عامل برای طراحان وب امکان پذیر نبود .طراحان مجبور بودند از فونت هایی استفاده کنند که در همه سیستم عامل ها یافت می شود که در سایت های فارسی بیشتر از فونت های arial و  Tahoma استفاده می کردند .

امکان استفاده از فونت های دلخواه در طراحی وب از نسخه css3 امکان پذیر شد . با فراهم شدن این امکان در css3 شما قادر خواهید بود از هر فونتی که مورد نظر شما است استفاده کنید . استفاده از فونت دلخواه توسط @font-face تعریف می شود .

جدول پشتیبانی مرورگرهای مختلف از @font-face :

Browser-Support-FontFace

 

برای استفاده از فونت مورد نظر خود باید فایل فونت های مورد نظر را در کنار پروژه و یا بر روی هاست خود قرار دهید .

شکل کلی استفاده از @font-face به صورت زیر خواهد بود :

@font-face {

    font-family: myfontname;

    src: url(byekan.woff);

}

بهتر است اسم انتخابی که در مقابل  font-family  می نویسید به صورت حروف کوچک باشد ، استفاده از حروف بزرگ ممکن است باعث نتیجه غیره منتظره در مرورگر IE بشود .

 مقدار دهی هر دو خاصیت font-family و src الزامی می باشد در غیر اینصورت نمی توان فونت مورد نظر را بکار برد.

اما توضیح کدهای بالا ، توسط font-family شما برای فونت مورد نظر خود اسمی را تعیین میکنید و در هرکجا بخواهید از فونت مورد نظر استفاده کنید باید این نام را بنویسید مثلا:

#para{

Font-family:myfontname;

}

 

Src :

مسیر فایل یا فایل های فونت مورد نظر را باید در مقابل این خاصیت نوشت .آدرس دهی می تواند نسبی یا مطلق باشد .در صورتی که پروژه را بر روی اینترنت آپلود کنید باید فونت های مورد نظر را هم آپلود کرد.

بعضی از فرمت های فونت ها توسط بعضی از مرورگر ها پشتیبانی نمی شود برای رفع این مشکل می توانید برای اطمینان بیشتر سایر فرمت های دیگر هم در مقابل src ذکر کرد با این کار احتمال نشناختن فرمت فونت توسط مرورگر را کمتر می کنیم . مثلا :

@font-face {

    font-family: myfontname;

    src: url(byekan.woff), url(byekan.ttf), url(byekan.eot);

}

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

در صورتی که بخواهید فونت مورد نظر را Bold و یا Style آن را تغییر دهید باید خصوصیات مورد نظر را در بلاک @font-face بنویسید :

@font-face {

    font-family: myfontname;

    src: url(byekan.woff);

font-weight:bold;

font-style: italic;

}

 مقادیر قابل قبول برای خاصیت های  font-style , font-weight به صورت زیر است :

font-weight:  normal , bold , 100 ,200,300,400,500,600,700,800,900

font-style: normal ,italic , oblique

جدول پشتیبانی مرورگرها از فرمت های فونت :

Font-format استفاده بی مورد و بیش از حد از @font-face ممکن است باعث کند شدن بارگزاری سایت شود .


توسط : عثمان رحیمی  2 ماه قبل ، سه شنبه 4 شهریور 1393 ساعت 05:44  0  1892

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط