خاصیت فونت

 

خصوصیت font-family

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

<h2> 7Learn.com </h2>
<h4> Javascript and Web Design Tutorials </h4>

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

h2 { font-family: "courier new"; }
h4 {font-family: tahoma; }

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

font family <a  style=آموزش CSS (فصل دوم) : خاصیت فونت" title="font-family" width="363" height="207" />

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

h2 { font-family: times , "times new roman" , serif; }

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

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

 خصوصیت font-style

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

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

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

مثال :

h2 { font-style: italic; }
h4 { font-style: oblique; }

خصوصیت font-variant

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

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

مثال :

h2 , h4 { font-variant: small-caps; }

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

font variant <a  style=آموزش CSS (فصل دوم) : خاصیت فونت" title="font-variant" width="363" height="214" />

خصوصیت font-weight

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

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

normal , bold , bolder , lighter , 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900

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

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

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

با استفاده از خاصیت font-size می توان اندازه فونت متون را کنترل کرد.

مقادیر ممکن برای این خاضیت عبارتند از:

  • کلمات کلیدی :
1 xx-small , x-small , small , medium , large , x-large , xx-large

که مقدار پیشفرض medium است.

معادل های کلمات کلیدی برای font-size در html عبارنتداز :

font size <a  style=آموزش CSS (فصل دوم) : خاصیت فونت" title="font-size" width="643" height="98" />

در کلمات کلیدی هر مقدار 1.2  برابر مقدار قبلی خود می باشد، به طور مثال اگر medium برابر 16px باشد آنگاه large برابر 16 ضربدر 1.2 مساوی با 19.2  یا تقریبا 19 خواهد بود.

  • مقادیر نسبی: مقادیر نسبی یکی از دو مقدار larger و smaller را می پذیرد.

مقدار larger در مقادیر نسبی، فونت را 1.2 برابر فونت قبلی می کند.

مقادیر زیر %100 معادل smaller و مقادیر بالای %100 معادل larger می باشند.

  • مقادیر درصدی : مقادیر درصدی برای font-size وابسته به عنصر پدر می باشند.

مثال :

1 p { font-size: 80%; }
  • مقادیر عددی :

font size length <a  style=آموزش CSS (فصل دوم) : خاصیت فونت" title="font-size-length" width="455" height="506" />

به طور مثال کد html زیر را داریم :

1 <h1> 7Learn.com </h1>
2 <h2> 7Learn.com </h2>
3 <h3> 7Learn.com </h3>

و کد css زیر :

1 h1 { font-size: 2pc; }
2 h2 { font-size: 24pt; }
3 h3 { font-size: 32px; }

با اینکه مقادیر داده شده به هر یک فرق می کند، اما در مرورگر هر سه آن ها هم اندازه خواهند بود.

کوتاه نویسی خصوصیات فونت

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

1 p {
2     font-style: italic;
3     font-variant: small-caps;
4     font-weight: bold;
5     font-size: 12pt;
6     font-family: times , serif;
7 }

این پنج خصوصیت را می توان به صورت زیر در یک خط خلاصه کرد:

1 p { font: italic small-caps bold 12pt times , serif; }

قاعده مقدار دهی به صورت زیر است

1 font: font-style | font-variant | font-weight | font-size | font-family

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

درضمن قرار دادن مقدار دادن به سه خصوصیت font-style ، font-variant و font-weight هنگام کوتاه نویسی اختیاری اما مقدار دادن به دو خصوصیت font-size و font-family اجباری است وگرنه کد کار نخواهد کرد، یعنی حداقل مقدار دادن در صورت کوتاه نویسی به صورت زیر است:

1 p { font: font-size | font-family; }

درضمن همانطور که قبلا گفتم ترتیب آنها نیز مهم است مثلا اگر در قاعده بالا اول font-family و سپس font-size را مقدار دهی کنیم، کد در مرورگر کار نخواهد کرد.

در حالت کوتاه نویسی مقادیر خصوصیت ها باید با یک space از یکدیگر جدا شوند..

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


منبع : 7learn.com

ارسال نظر