• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش CSS (فصل دوم) : خاصیت فونت

25970 ۹ آبان ۹۱
1 2

خصوصیت font-family

می توان نوع فونت مورد استفاده برای متن را با استفاده از خاصیت font family تعیین کرد. به طور مثال فرض کنید که ما کد html زیر را داریم :

حال می خواهیم که متن تگ h2 را با فونت Courier New و متن تگ p را با فونت Tahoma  نمایش دهیم، کد css ما چنین خواهد شد :

نتیجه در مرورگر :

حال حتما می پرسید که چرا نام فونت  courier new را داخل کوتیشن (" ") گذاشته ام اما نام فونت Tahoma را نه. این کار، به این دلیل است که نام فونت courier new  دارای فضای خالی (space) نیز هست، هرگاه نام فونتی دارای فضای خالی بود باید نام آن را داخل کوتیشن قرار داد. درضمن می توان از چندین فونت برای یک تگ استفاده کرد به طور مثال :

هنگامی که از چندین فونت استفاده می شود، این فونت ها باید با علامت (,) از یکدیگر جدا شوند. در این حالت اگر فونت اول بر روی سیستم کاربر موجود نباشد دومین فونت اعمال خواهد شد و اگر فونت دوم نیز بر روی سیستم کاربر موجود نباشد سومین فونت اعمال خواهد شد و الی آخر.

استایل تعریف شده در مثال فوق فونت تمامی تگ های h2 را به فونت times تغییر خواهد داد و اگر فونت times بر روی سیستم کاربر موجود نباشد از فونت times new roman استفاده خواهد شد و اگر ......

 خصوصیت font-style

با استفاده از این خاصیت می توان متن را به صورت italic یا مورب نمایش داد. و سه مقدار را می پذیرد:

  • Normal : مقدار پیشفرض و حالت عادی فونت می باشد.
  • Italic : متن را به صورت مورب نمایش می دهد.
  • Oblique : متن را به صورت مورب نمایش می دهد و در اکثر فونت ها تفاوت ظاهری چندانی با italic ندارد.

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

مثال :

خصوصیت font-variant

این خصوصیت حروف را به صورت uppercase (حروف بزرگ)  نمایش می دهد. اما در این حالت حروف کمی از حالت capitalized کوچکترند. این خصوصیت دو مقدار زیر را می گیرد:

  • Normal : مقدار پیشفرض و حالت عادی حروف
  • Small-caps : نمایش حروف به صورت uppercase

مثال :

نتیجه در مرورگر :

خصوصیت font-weight

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

و یکی از مقادیر زیر را می گیرد.

مقدار پیشفرض این خصوصیت normal  است.

در عمل فقط سه مقدار normal و bold و lighter در اکثر مرورگرها به درستی کار می کنند.

به طور معمول مقدار normal معادل مقدار 400 و مقدار bold معادل مقدار 700  می باشد.

1 2
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 9 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    ممنون. 😀

  • ‏‏

    ادامه ی فصل اول رو بنویسید لطفا

    • ‏‏
      سجاد دریس(۱۰ آبان ۱۳۹۱)

      سلام.
      فصل اول که سه جلسه بود تمام شد،
      الانم فصل دومه…
      اگه منظورتون خصوصیت های قالب بندی متنه، اون رو گذاشتم واسه فصل سه.

  • ‏‏
    بهمن ش یار(۲۵ اردیبهشت ۱۳۹۲)

    لطفآ به من یه لینک برای دانلود همه ای آموزش های سی اس اس بگید

    • ‏‏
      سجاد دریس(۲۶ اردیبهشت ۱۳۹۲)

      سلام.
      دانلود همه آموزشها با هم وجود نداره اما میتونید همه آموزش ها رو در این صفحه ببنید و یکی یکی به pdf تبدیل، و دانلود کنید

  • ‏‏
    بهمن ش یار(۲۶ اردیبهشت ۱۳۹۲)

    ممنونم دوست عزیز!
    اما تعداد دقیق هر فصل رو دوتستن خیلی مشکل است دوست من.

  • ‏‏

    سلام وقت بخیر…
    این کدهای سی اس اس رو کجا باید بنویسم؟ توی پیج اچ تی ام ال و زیر تگهاش یا یه پیج دیگه تو ادیتورم باز کنم؟

  • ‏‏

    آهان… راس میگین
    Sorry 😳

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram