جلسه قبل که در مورد Text آموزش دادیم و در این قسمت از فیلم آموزش CSS نحوه استفاده از فونت دلخواه در CSS را آموزش داده ایم که در طراحی سایت زیاد استفاده می شود و مبحث خیلی مهمی است پس این آموزش رو از دست ندید .

خاصیت Font-family :

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

اگر هم از فونت های پیش فرض می خواهید استفاده کنید فقط کافیه که اسم اون رو بنویسید مانند کد زیر در CSS :

.box{
	font-family: 'tahoma';
}

نحوه استفاده از font-face@ در CSS

این خاصیت در CSS3 برای اضافه کردن فونت دلخواه معرفی شد و همه مرورگرها از این خاصیت پشتیبانی نمی کنند بلکه نسحه های جدید مرورگر ها از این خاصیت پشتیبانی می کنند .

مرورگر های فایرفکس ، اپرا ، کروم  ، سافاری از دو نوع فرمت ttf. و otf. پشتیبانی می کنند . برای به دست آوردن فرمت های مختلف فونت مورد نظرتان می توانید به سایت های زیر مراجعه کنید :

www.onlinefontconverter.com

www.font2web.com

حالا برای اضافه کردن فونت مورد نظرتان در ابتدای فایل CSS کد های زیر را وارد کنید :

@font-face {
    font-family: 'yekan';                   /*  تعریف یک نام برای فونت  */
    src:url('byekan/yekan.ttf') format('truetype');     
}

همان طور که می بینید اول خاصیت font-face@ را نوشته ایم بعد با استفاده از font-family یک نام دلخواه برای فونت انتخاب کرده ایم و با استفاده از url آدرس جایی که فونت اونجا فرا داره رو مشخص می کنیم و با format باید فرمت فونت را مشخص کنیم .

در سورس کد بالا فقط از فرمت ttf. استفاده کرده ایم حالا برای اضافه کردن فرمت های دیگه یه فونت مانند سورس کد زیر عمل می کنیم :

@font-face {
    font-family: 'yekan';                   /*  تعریف یک نام برای فونت  */
    src:url('byekan/yekan.ttf') format('truetype') , url('byekan/yekan.woff') format('woff') , url('byekan/yekan.eot') format('embedded-opentype') , 
	url('byekan/yekan.svg') format('svg');     
}

به کاما ( , ) دقت کنید . حالا برای چی از فرمت های دیگه هم استفاده می کنیم ؟؟؟ همه مرورگر ها از فرمت ttf. پشتیبانی نمی کنند و باید فرمت هایی که اون مرورگر ها پشتیانی می کنند را هم اضافه کنیم مثلاً : اکسپلورر 9 به بعد از فرمت eot پشتیبانی می کند و نسحه های قدیمی ios از فرمت svg پتیبانی می کند . مرورگر های جدید از فرمت woff پشتیبانی می کنند .

اضافه کرن چندین فونت در صفحه :

شما می توانید هر چند تا که فونت خواستید اضافه کنید مانند سورس کد زیر :

@font-face {
    font-family: 'yekan';                   /*  تعریف یک نام برای فونت  */
    src:url('byekan/yekan.ttf') format('truetype') , url('byekan/yekan.woff') format('woff') , url('byekan/yekan.eot') format('embedded-opentype') , 
	url('byekan/yekan.svg') format('svg');     
}
@font-face {
	font-family: 'BKoodkBd' ;
	src: url(bkoodak/BKoodkBd.ttf) format('truetype') ,  url(bkoodak/BKoodkBd.eot) format('embedded-opentype');
	font-weight:normal;
	font-style:normal;
}

حالا برای استفاده از این font هایی که اضافه کرده اید کافیه از خاصیت font-family استفاده کنید و مقدار آن را برابر اسم فونت مورد نظرتان قرار بدید .

خاصیت font-size :

با استفاده از این خاصیت می توانیم سایز متن ها را مشخص کنیم .

خاصیت font-weight :

اگر بخواهیم فونت به صورت نرمال باشد مقدار این خاصیت را برابر normal قرار می دهیم و اگر بخواهیم فونت به صورت بولد باشد مقدار این خاصیت را برابر bold در نطر می گیریم .

خاصیت font-style :

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

@font-face {
    font-family: 'yekan';              
    src:url('byekan/yekan.ttf') format('truetype') , url('byekan/yekan.woff') format('woff') , url('byekan/yekan.eot') format('embedded-opentype') , 
	url('byekan/yekan.svg') format('svg');     
	
	font-weight: normal;
	font-style: normal; 
}
body{
	font-family: 'yekan';
	font-size: 20px;
}

فیلم آموزش استفاده از فونت را می توانید از لینک زیر دانلود کنید .