آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

Font ها در CSS

CSS

فصل چهارم : Properties در CSS

جلسه ششم  : Font ها در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان در جلسه ی پیش Border در CSS رو به همراه اشکال هندسی قابل ترسیم با Border آموزش دادیم . در این جلسه ی آموزشی راجع به  font ها در CSS بصورت مفصل صحبت می کنیم .

 

فونت ها در وب

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

 

ساختار اصلی Font ها در CSS

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

Font : font-style font-variant font-weight font-size/line-height font-family

نمونه : Font : italic normal bold 12px/22px Tahoma

نمونه ساده و کاربردی : Font : ۱۲px/22px Tahoma

 

font-style

Font-Style شامل مقادیر زیر میشه :

normal : استایل پیشفرض مرورگر رو برای فونت در نظر میگیره که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

Italic : در صورتی که این مقدار رو قرار بدید ، استایل فونت به شکل کج لحاظ میشه .

Oblique : این مقدار هم مانند italic عمل میکنه .

Initial : استایل پیشفرض مرورگر رو لحاظ میکنه که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

Inherit : در صورتی که برای عنصر فرزند این مقدار رو لحاظ کنید ، استایل فونت عنصر والد رو به خودش اختصاص میده .

 

font-variant

Font-Variant برای متون لاتین به کار میره که شامل مقادیر زیر میشه :

normal : استایل پیشفرض مرورگر رو برای فونت در نظر میگیره که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

small-caps : تمامی حروف رو به بزرگ تبدیل میکنه و نمایش میده .

Initial : استایل پیشفرض مرورگر رو لحاظ میکنه که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

Inherit : در صورتی که برای عنصر فرزند این مقدار رو لحاظ کنید ، Font-Variant فونت عنصر والد رو به خودش اختصاص میده .

 

font-weight

Font-Weight شامل مقادیر زیر میشه :

normal : استایل پیشفرض مرورگر رو برای فونت در نظر میگیره .

Bold : متون رو با یک برابر ضخامت بیشتر نمایش میده .

Bolder : شبیه به Bold عمل میکنه .

Lighter : متون رو با ضخامت پیشفرض نمایش میده .

Initial : استایل پیشفرض مرورگر رو لحاظ میکنه که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

Inherit : در صورتی که برای عنصر فرزند این مقدار رو لحاظ کنید ، Font-Weight فونت عنصر والد رو به خودش اختصاص میده .

۱۰۰ , ۲۰۰ , ۳۰۰ , ۴۰۰ , ۵۰۰ , ۶۰۰ , ۷۰۰ , ۸۰۰ , ۹۰۰ : تا ۴۰۰ استایل همانند normal عمل میکنه از ۴۰۰ به بعد متون رو Bold نمایش میده .

 

font-size

font-size شامل مقادیر زیر میشه که کاربرد زیادی نداره و بصورت عموم از px و em استفاده میشه :

xx-small : سه برابر کوچکتر از اندازه پیشفرض فونت رو نمایش میده .

x-small : دو برابر کوچکتر از اندازه پیشفرض فونت رو نمایش میده .

Small : یک برابر کوچکتر از اندازه پیشفرض فونت رو نمایش میده .

Medium : بصورت مدیوم و نصف اندازه پیشفرض فونت رو نمایش میده .

Large : یک برابر بزرگ تر از اندازه پیشفرض فونت رو نمایش میده .

x-large : دو برابر بزرگ تر از اندازه پیشفرض فونت رو نمایش میده .

xx-large : سه برابر بزرگ تر از اندازه پیشفرض فونت رو نمایش میده .

Smaller : با اندازه مابین x-small و  xx-small فونت رو نمایش میده .

Larger : با اندازه مابین x-large و  xx-large فونت رو نمایش میده .

Px : با واحد پیکسل فونت رو نمایش میده . در صفحات وب در صورتی که از Tahoma استفاده کنید فونت استاندارد ۱۲px هست.

% : با واحد درصد فونت رو نمایش میده .

Initial : استایل پیشفرض مرورگر رو لحاظ میکنه که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

Inherit : در صورتی که برای عنصر فرزند این مقدار رو لحاظ کنید ، font-size فونت عنصر والد رو به خودش اختصاص میده .

 

line-height

توسط line-height میتونید فاصله ی بین خطوط رو تعیین کنید که شامل مقادیر زیر میشه :

length : با واحد های px , pt , cm , em میتونید فاصله ی بین خطوط رو تعیین کنید . عموما از px و  em استفاده میشه .

Initial : استایل پیشفرض مرورگر رو لحاظ میکنه .

Inherit : در صورتی که برای عنصر فرزند این مقدار رو لحاظ کنید ، line-height فونت عنصر والد رو به خودش اختصاص میده .

 

نکته : در صورتی که لازم باشه شما میتونید از این خاصیت ها بصورت جداگانه استفاده کنید ، به عنوان مثال یک صفحه وب دارید که از پیش استایل font: 16px/25px tahoma رو برای متون لحاظ کرده ، و شما میخواین اندازه فونت رو تغییر بدید ، در این صورت با خاصیت font-size این کار رو انجام میدید .

 

افزودن فونت های دلخواه به صفحه وب

گاهی اوقات شما قصد دارید فونت های دلخواه فارسی خودتون رو به صفحه ی وبتون اضافه کنید . به عنوان مثال از فونت Byekan برای متون صفحات استفاده کنید . برای این منظور باید ابتدا فونت وب های Byekan رو به فایل css تون اضافه کنید و سپس برای متون اون رو لحظا کنید .

 

نحوه ی افزودن فونت های دلخواه در CSS

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

پس از اینکه فایل رو دانلود کردید ، فونت مورد نظر رو انتخاب کنید و از پوشه ی fonts کپی کنید و در پوشه ی خودتون paste کنید . ما Byekan رو برای مثال در نظر میگیریم . همانند کد زیر ، فونت مورد نظرتون رو در ابتدای فایل css فراخوانی کنید :

و توسط کد زیر این فونت رو به عنصر مورد نظرتون اختصاص بدید :

به همین راحتی 🙂

البته باید دقت داشته باشید که برای فونت های فارسی نمیتونید هر سایزی رو انتخاب کنید ، به عنوان مثال سایزهای استاندارد برای Byekan اندازه های ۱۳px , 16px , 18px , 22px و … هست .

 

تعیین رنگ برای فونت ها

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

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

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • فرهاد

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

  • فرهاد

    از پاسخ شما سپاس گذارم !

    • میترا رحیمی

      سلام دوست عزیز
      عذرخواهی می کنم ، جناب همت یار دیدگاهتون رو تایید کرده بودن بنده اطلاعی نداشتم ، در رابطه با نرم افزار من چیز خاصی مدنظرم نیست ، اما اگر نرم افزار خاصی پیدا کردم یا از طریق همین کامنت یا از طریق ایمیل حتما بهتون اطلاع میدم .
      موفق باشید .

  • hassany

    سلام اگه منظورتون نرم افزاری خوب و کامل برای نوشتن کدهای css هستش من نرم افزار htmlpad رو بهتون پیشنهاد میکنم که نرم افزار کاملی برای نوشتن کدهای طراحی وبه html,css,javascript,php و…
    تشکر بابت این آموزش.

  • hassany

    در قسمت آدرس دهی فونت فکر کنم مقادیر زیر کافی باشه
    src:url(‘fonts/byekan.eot’),
    url(‘fonts/byekan.woff’),
    url(‘fonts/byekan.ttf’);
    من امتحان کردم مشکلی نداشت.

    • میترا رحیمی

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

  • hassany

    ممنونم از راهنماییتون.

  • شمیمی

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

  • سهیل حسن جانی میر

    لینک فونت ها خراب است .

    • میترا رحیمی

      سلام دوست عزیز
      اصلاح شد.
      موفق باشید

  • hossein hassani

    سلام خانم رحیمی.
    در رابطه با آموزش این صفحه مطلبی بود که براتون توی قالب یه فایل گذاشتم.
    http://s6.picofile.com/file/8176874450/%D9%BE%DB%8C%D9%88%D8%B3%D8%AA_%D9%81%D9%88%D9%86%D8%AA_%D8%A8%D9%87_%D8%B5%D9%81%D8%AD%D9%87_%D9%88%D8%A8.rar.html

  • رضا

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

    • میترا رحیمی

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟