تفاوت بین فونتهای serif  و Sans-serif

 

ویژگی font-family

برای تعیین نوع قلم متن بکار می رود

 

روش استفاده :

font-family : نام قلم

یا

font-family : نام قلم , نام قلم ,....

 

اگر مرورگر نتواند فونت اولی را نمایش دهد به سراغ فونت دومی می رود و الی اخر

اگر هم که هیچکدام از فونت ها قابل نمایش نباشند مرورگر از قلم پیش فرض استفاده می کند

 

نکته : اگر نام قلم بیش از یک حرف باشد باید درون کوتیشم نوشته شود

 

مثال 1:

 

p{font-family:"Times New Roman", Times, serif;}
در این مثال سه نام قلم تعریف شده برای متن هایی که با تگ p نوشته می شوند اگر اولی قابل نمایش نباشد از دومین قلم استفاده می شود و اگر انهم قابل نمایش نبود از نوع قلم سوم استفاده می شود
و چون اسم اولین قلم یعنی Times New Roman بیش از یک کلمه است تمام نام ان درون یک جفت کوتیشن قرار می گیرد

 

ویژگی font-style

برای نمایش ایتالیک یا مورب متن بکار می رود و می تواند مقادیر زیر را داشته باشد

normal : متن را بصورت معمولی نمایش می دهد

italic : متن را بصورت مورب نمایش می دهد

oblique : متن را بصورت مورب نمایش می دهد

 




مثال 1 :

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

 





مشاهده و اجرای برنامه کامل

 




ویژگی font-size

برای تغییر در اندازه قلم بکار می رود

توجه داشته باشید که بهتر است اندازه متنهایی که با تگ های عنوان یعنی <h1> تا <h6> نوشته می شوند تغییر ندهیدزیرا این تگ ها اندازه استاندارد را به متن خود می دهند

و از اندازه قلم فقط در متن هایی که با تگ p ایجاد می شوند استفاده نمائید

 

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

روش اول : اندازه مطلق

روش دوم : اندازه نسبی

 

در روش اول  کاربر نمی تواند در تمام مرورگرها اندازه قلم را تغییر دهد و اندازه همانی خواهد بود که ما در برنامه تعیین کرده ایم

در اندازه نسبی اندازهقلم متناسب با اندازه محدوده تگ مورد نظر خواهد بود و از طرف دیگر کاربر می تواند در تمامی مرورگرها اندازه قلم را تغییر دهد

 اگر اندازه قلم را تعیین نکنید به طور پیش فرض این اندازه برابر 16px خواهد بود

 هر 16 پیکسل برابر 1 em است

 


تنظیم اندازه قلم با واحد پیکسل

تعیین اندازه با پیکسل باعث می شود شما کنترل بیشتری روی اندازه متن داشته باشید

مثال 1:

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

این دستورات اجازه می دهد  که متن در تمام مرورگرها مثل ie9 , firefox , opera , safari,chrome با تغییر اندازه مرورگر تغییر اندازه دهند

البته اگر با ابزار zoom اندازه مرورگر تغییر کند اندازه قلم نیز تغییر می کند

دستورات بالا در مرورگر قبل از ie9 کار نمی کند

مشاهده و اجرای برنامه کامل

 


تعیین اندازه قلم با واحد em

برای جلوگیری از تغییر اندازه قلم با تغییر اندازه مرورگر اینترنت اکسپلورر از واحدی به نام em استفاده می شود


می توانید از درصد و em با هم استفاده نمائید

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

 

حال با این روش متنها در تمام مرورگرها با یک اندازه نشان داده می شوند و اجازه می دهد با zoom کردن صفحه در تمام مرورگرها متن هم تییر اندازه دهد

ویژگی font-weight

برای توپر و ضخیم نشان دادن متن بکار می رود

در مرورگرهای زیر می تواند اجرا شود :

Internet Explorer Firefox Opera Google Chrome Safari

و می تواند مقادیر زیر را داشته باشد :

normal : متن را بصورت معمولی نشان می دهد

bold : متن را بصورت توپر یا ضخیم نشان می دهد

bolder : متن را ضخیم تر نشان می دهد

lighter : متن را بصورت نازک نشان می دهد

100
200
300
400
500
600
700
800
900 : متن را از نازک تا ضخیم تغییر میدهد اندازه 400 اندازه normal متن است

inherit : مشخص می کند که متن باید ضخامت خود را از تگ والد خود به ارث برد

 

مشاهده  تاثیر هر گزینه روی متن

 

ویژگی font-variant

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

 

در مرورگرهای زیر این ویژگی کار می کند :

Internet Explorer Firefox Opera Google Chrome Safari

 

می تواند مقادیر زیر را داشته باشد :

normal: متن را بدون تغییر و به حالت معمولی که شما مشخص کردید نمایش می دهد

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

 

مشاهده و اجرای برنامه کامل

 

 

ویژگی font

تمام ویژگیهای بالا را می توان بصورت یکجا جلوی ویژگی font بنویسیم

 

توجه کنید که ترتیب در بکار بردن ویژگیهای بالا مهم است

روش استفاده :

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

استفاده از font-size و font-family اجباری است اما اگر سایر ویژگیها را مقدار ندهید مقدار پیش فرض در نظر گرفته می شود

 

مثال 1:

p.ex1
{
font:15px arial,sans-serif;
}

p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}

 

مشاهده و اجرای برنامه کامل