ورود ثبت نام
آموزش استفاده از فونت ( Font ) دلخواه در فیلم آموزشی CSS
» طراحی سایت » آموزش CSS » آموزش استفاده از فونت ( Font ) دلخواه در فیلم آموزشی CSS
10619 بازدید

آموزش استفاده از فونت ( Font ) دلخواه در فیلم آموزشی CSS

جلسه قبل که در مورد 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;
}

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

 

رضا طوماری

دیدگاه



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

  1. فرشاد گفت:

    سلام و سپاس از مطلب مفیدتون
    من تو هاست تمام فونت ها رو اضافه کردم و در کنار پوشه فونت ها یک فایل با پسوند css ایجاد کردم و کدهای زیر رو بهش اضافه کردم اما هر کاری می کنم ، فونت اعمال نمیشه !!
    @font-face {
    font-family: ‘Yekan’;
    src: url(‘typefaces/iran-yekan/yekan-webfont.eot’);
    src: url(‘typefaces/iran-yekan/yekan-webfont.eot?#iefix’) format(’embedded-opentype’),
    src: url(‘typefaces/iran-yekan/yekan-webfont.woff2’) format(‘woff2’),
    src: url(‘typefaces/iran-yekan/yekan-webfont.woff’) format(‘woff’),
    src: url(‘typefaces/iran-yekan/yekan-webfont.ttf’) format(‘truetype’),
    src: url(‘typefaces/iran-yekan/yekan-webfont.svg#weblogmayekanregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }
    ——————————
    اینو هم خدمتتون بگم که فایل css رو کنار پوشه iran-yekan قرار دادم و حتی در یک پوشه به نام css قرار دادم و آدرس دهی کامل با لینک کردم اما بازم فونتم اعمال نمیشه .
    بنظرتون دلیلش چی می تونه باشه؟
    فونت IRANSans ، IranYekan ، Vazir رو با قالب صحیحش دانلود و طبق روش فوق پیش رفتم اما بازم نشد!!
    ——————————–
    به صورت زیر هم وارد کد css رو وارد کردم ولی بازم نتیجه ای نداد ! (SRC رو از ابتدای برخی مسیرهای آپلود فایل های فونت برداشتم گفتم شاید جواب بگیرم 🙁

    @font-face {
    font-family: ‘Yekan’;
    src: url(‘typefaces/iran-yekan/yekan-webfont.eot’);
    src: url(‘typefaces/iran-yekan/yekan-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘typefaces/iran-yekan/yekan-webfont.woff2’) format(‘woff2’),
    url(‘typefaces/iran-yekan/yekan-webfont.woff’) format(‘woff’),
    url(‘typefaces/iran-yekan/yekan-webfont.ttf’) format(‘truetype’),
    url(‘typefaces/iran-yekan/yekan-webfont.svg#weblogmayekanregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

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

      سلام وقت بخیر
      قدم به قدم برید جلو اول یه استایلی به صفحه بدید مثلا بکگراند رو قرمز بکنید اگه این کد کار کرد مشکل از نحوه تعریف فونت هستش وگرنه فایل رو درست تعریف نکردید .
      این جوری که شما تعریف کردید فایل css در کنار پوشه typefaces هستش و فونت ها داخل اون هستن ، ببینید مسیر آدرس دهیتون درست هستش ( احتمالا مسیر رو درست نداید الان اینجا فایل css باید در کنار پوشه typeface باشه نه داخل اون ).
      نکته دیگه این که شما به جای استفاده از چندین عبارت src باید از یک عبارت src استفاده بکنید .

  2. مهدی گفت:

    سلام

    من فونت سایتم قبلا از BYekan.tff بود، الان میخوام فقط BYekan.woff اضافش کنم. ولی وقتی این رو اضاف میکنم فونت یکم ریز میشه ؟
    مشکل از چیه هست ؟

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

      سلام
      برای اینکه از ضخامت نرمال فونت استفاده کنید این دستور رو به css اضافه کنید :
      font-weight: normal;
      اگر باز هم ناز بود مقدار font-weight رو بین 500 تا 700 قرار بدید ببینید .

  3. alireza tahriri گفت:

    عالی بود واقعا به این آموزش نیاز داشتم