ورود ثبت نام
فیلم آموزش CSS3 - آموزش فونت در CSS
» طراحی سایت » آموزش CSS3 » فیلم آموزش CSS3 – آموزش فونت در CSS
10563 بازدید

فیلم آموزش CSS3 – آموزش فونت در CSS

در این جلسه از فیلم آموزش 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;
}

رضا طوماری

دیدگاه



جواب سوال چیه ؟ *

  1. ناشناس گفت:

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

  2. ترجمه مقاله گفت:

    ممنون از آموزش خوبتون

  3. عسل گفت:

    سلام عالی بود…. تشکر از زحماتتون

  4. پوکه معدنی گفت:

    سلام ممنون از اشتراک گذاریتون.. موفق باشید

  5. سامان گفت:

    سلام بابت سایت خوبتون تشکر میکنم خیلی فیلم های خوبی تهیه کردید آموزش ها عالین – خواستم بدونم از آموزش css3 چند قسمت دیگه مونده ؟

    • رضا طوماری گفت:

      سلام
      حدود 6 قسمت دیگه مونده

    • سامان گفت:

      تشکر خدا خیرتون بده – خیلی گشتم تو سایتا اما نتونستم فیلم آموزشی خوبی تهیه کنم که خوب وکامل توضیح بدن – امیدوارم که تو زندگیتون موفق باشید همیشه

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

  7. مشاوره خدمات کامپیوتری گفت:

    سلام.خواستم بابت وبسایت خوبتون ازتون تشکر کنم و امیدوارم باعث ایجاد انگیزه براتون بشه
    تشکر