CSSطراحی سایتگوناگون

۶-فرمت دهی فونت در CSS

ویژگی های مربوط به فرمت دهی فونت در CSS موارد مربوط به اندازه قلم،رنگ قلم و … را مشخص میکند.

 

 

در CSS برای مشخص کردن قلم دو راه وجود دارد:

 

  1. generic family: یک گروه از Fontهایی که شبیه یکدیگرند (مانند Serif,Monospase)
  2. font family: در این روش باید نام یک Font را مشخص کنیم (مانند Tahoma,Arial)

 

 


 

 

تنظیم قلم یک متن

 

خصوصیت font-family نوع قلم یک متن را تنظیم می کند.

 

  • توجه: اگر نام یک font بیشتر از یک کلمه باشد باید آنرا در کوتیشن مارک قرار دهید، مانند: “Times New Roman”

 

برای لیست کردن fontها از جدا کننده کاما استفاده کنید:

 

  • در مثال بالا اگر “Times New Roman” در کامپیوتر کاربر نصب شده باشد، به تگ <p> اختصاص داده خواهد شد و اگر نصب نباشد “Times” استفاده می شود و در نهایت اگر هیچکدام از Fontها موجود نباشد، مرورگر از بین مجموعه فونتهای serif یکی را اختصاص خواهد داد.

 


 

تنظیم نوع نمایش یک متن

 

خصوصیت font-style اغلب برای مشخص کردن متن مورب یا italic استفاده می شود.

 

این خصوصیت دارای ۳ مقدار زیر است:

  1. normal: متن به صورت معمولی نمایش داده می شود.
  2. italic: متن به صورت مورب نمایش داده می شود.
  3. oblique: خیلی شبیه italic است، اما کمتر پشتیبانی می شود.

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

تنظیم اندازه یک متن

 

خصوصیت font-size اندازه یک متن را تنظیم می کند.

 

دقت داشته باشید که مدیریت اندازه متن در وب بسیار مهم است، البته برای تنظیم اندازه متن عنوان ها(header)، استفاده از این خصوصیت مناسب نیست و باید از تگهای <h1> تا <h6> استفاده شود.

 

  • نکته: اگر اندازه متن را مشخص نکنید، مقدار پیشفرض برای متن های معمولی مثل پاراگراف ها، ۱۶ پیکسل خواهد بود(۱۶px=1em)

 

 

تنظیم اندازه متن با واحد pixel(پیشنهادی)

 

تنظیم اندازه متن با واحد پیکسل، به شما اجازه می دهد تا کنترل بیشتری، روی اندازه متن عناصر داشته باشید:

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

تنظیم اندازه متن با واحد em

 

برای اجتناب از مشکل تغییر اندازه متن، در نسخه های قدیمی IE، بیشتر توسعه دهندگان وب از em بجای pixel استفاده می کنند.

واحد اندازه em توسط W3C پیشنهاد شده است.

۱em مساوی با اندازه متن جاری است. اندازه پیشفرض در تمام مرورگرها ۱۶px است، بنابراین اندازه پیشفرض ۱em مساوی با ۱۶px است.

با استفاده از فرمول روبرو می توان pixel را به em تبدیل کرد.      pixels/16=em

 

 

استفاده ترکیبی از واحد em و درصد

 

راه حل نهایی که در تمام مرورگرها کار خواهد کرد این است که، یک اندازه پیشفرض به درصد، در تگ <body> تنظیم کنیم:

 

 


 

 

خاصیت font-weight

 

این مثال نشان می دهد که چگونه ضخامت یک متن را تنظیم کنیم (Bold).

 

  • تصویر قطعه کد بالا به شکل زیر است:


 

 

خاصیت font-variant

 

این مثال نشان می دهد که چگونه برای متن های انگلیسی، حروف کوچک را به حروف بزرگ تبدیل کنیم البته در اندازه کوچک.

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

مختصر نویسی خواص مربوط به متن

 

 

 

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

همچنین ببینید

بستن
بستن