در این جلسه از فیلم آموزش CSS3 آموزش فونت در CSS توضیح داده شده است و شما می توانید با یادگیری این درس فونت دلخواه خودتون رو به قالب و صفحه html اضافه کنید و هم چنین از فونت فارسی در CSS استفاده کنید و زیبایی قالب سایت یا صفحه HTML مورد نظرتون رو دو چندان کنید .

در این فیلم آموزشی اول در مورد فرمت فونت ها آموزش داده شده است که از چه فرمت هایی استفاده کنید که همه مرورگر ها اونارو پشتیبانی بکنند و بعد نحوه استفاده از فونت در CSS آموزش داده شده است .

قبل از کد نویسی شما باید بدانید که کدام مرورگر ها از کدام نوع فرمت های فونت پشتیبانی می کند تا بعداً دچار مشکل نشوید ، تصویر زیر نشان دهند فرمت هایی که است که مروگر ها آن ها را پشتیبانی می کنند :

پشتیبانی فونت در مرورگر ها

دستور font-face@  :

برای اضافه کردن هر فونت دلخواه به CSS باید از ویژگی font-face@ استفاده کنید و داخل این دستور font-face از ویژگی font-family برای انتخاب اسم برای فونت استفاده می کنیم .

هر مقداری که بخواهید می توانید به font-family بدهید و ان مقدار اسم فونت شما می شود که در هر جای کد CSS نیاز داشتید که فونت رو عوض کنید کافیست که از آن استفاده کنید .

ویژگی src : 

با استفاده از ویژگی src ما مسیر فونتی را که می خواهیم به صفحه اضافه کنیم را به CSS می دهیم . برای اضافه کردن فرمت دوم یک فونت کافیست که بعد از نوع فونت اولی یک کاما ( , ) قرار بدید و پسوند دوم فرمت را بنویسید ، مانند کد زیر که نوشته شده است .

سورس کد اضافه کردن فونت دلخواه به صفحه html :

@font-face{
	font-family: iran ; 
	src: url(fonts/IRANSansWeb.ttf) format('truetype') , 
	     url(fonts/IRANSansWeb.otf) format('opentypefont');
}

حالا فونت در CSS اضافه شده و بعد از این هر جایی که نیاز داشتید از این فرمت استفاده کنید کافیست که از ویژگی font-family استفاده کنید و مقدار ان را برابر اسمی که به فونت خودتان دادید قرار بدید ، مانند کد زیر که فونتی که من به CSS اضافه کردم به همه تگ های P اعمال خواهد شد  :

p{
	font-family: iran;
}

ویژگی font-weight  :

نکته ای در فیلم آموزشی در مورد font-weight به صورت کامل توضیخ داده نشده این است که اگر فونت شما از نوع Bold هستش می تونید با استفاده از دستور زیر اون رو به CSS اضافه کنید و اگر فونت شما به صورت normal هست لزومی نداره که از font-weight استفاده کنید .

@font-face{
	font-family: iran ; 
	src: url(fonts/IRANSansWeb_Bold.ttf) format('truetype') , 
	     url(fonts/IRANSansWeb_Bold.otf) format('opentypefont');
	font-weight:bold;
}