صفت font-family
نوع فونت یک متن با مقدار دهی صفت font-family مشخص میشود. این صفت میتواند چندین مقدار را در خود جای دهد و البته این توصیه میشود که به یک فونت بسنده نشود چون که اگر مرورگر اولین فونت را پشتیبانی نکرد، از فونت بعدی استفاده کند.
معمولا یک سری فونت ها در مرورگر قابل شناسایی هستند مثلا برای زبان فارسی فونت tahoma در همه ی مرورگرها یک فونت شناخته شده است. برای استفاده از فونت های مخصوص فارسی مانند ایران سنس باید آنها را در سایت خود اضافه کنید.
نکته : اگر نام فونت مورد نظر شامل بیش از یک کلمه باشد، این نام را برای مقدار دهی در صفت font-family باید در کوتیشن مارک (" ") قرار داد.
اگر بخواهیم بیش از یک مقدار برای صفت font-family قرار دهیم آنها را با استفاده از ویگرول از هم جدا میکنیم :
} p
;font-family : "Times New Roman", Times, serif
{
صفت font-style
از صفت font-style اغلب برای مشخص کردن متون مایل (italic) استفاده میشود.
صفت font-style دارای سه مقدار است :
- normal - متن به صورت عادی نمایش داده میشود
- italic - متن به صورت مایل نمایش داده میشود
- oblique - متن دارای انحراف است (این حالت خیلی شبیه به حالت italic است اما توسط مرورگ ها کمتر پشتیبانی میشود)
} p.normal
;font-style : normal
{
} p.italic
;font-style : italic
{
} p.oblique
;font-style : oblique
{
صفت font-size
از صفت font-size برای تنظیم اندازه متون استفاده میشود. در طراحی وب، اینکه قادر باشید اندازه ی متون را مدیریت کنید از اهمیت زیادی برخوردار است. با این حال شما نباید از تنظیمات صفت font-size برای ایجاد کردن یک پاراگراف شبیه به هیدینگ ها استفاده کنید (یا یک هیدینگ شبیه به یک پاراگراف)
همیشه از تگ HTML مناسب استفاده کنید، برای مثال از تگ های <h1> تا <h6> برای هیدینگ ها و تگ <p> برای پاراگراف ها استفاده کنید.
مقدار صفت font-size میتواند یک مقدار مطلق باشد یا نسبی.
مقادیر مطلق :
- اندازه ی متن را با یک مقدار مشخص تنظیم میکند
- به کاربران اجازه ی تغییر اندازه ی متن در همه ی مرورگر ها را نمیدهد
- مقادیر مطلق برای زمانی که اندازه ی فیزیکی خروجی مشخص است ، مفید هستند
مقادیر نسبی :
- اندازه را نسبت به عناصری که آن را در برگرفته اند تنظیم میکند
- به کاربران اجازه ی تغییر اندازه ی متن را در مرورگر ها میدهد.
نکته : اگر شما صفت font-size را تنظیم نکنید ، اندازه ی پیشفرض برای متون عادی مانند پاراگراف ها برابر به 16 پیکسل است (16px=1em)
تنظیم اندازه ی فونت با پیکسل
تنظیم اندازه ی متن با پیکسل به شما کنترل کاملی را بر روی اندازه ی متن میدهد :
} h1
;font-size : 40px
{
} h2
;font-size : 30px
{
} p
;font-size : 14px
{
نکته : اگر از پیکسل برای اندازه ی متون استفاده میکنید، هنوز میتوانید از ابزار بزرگ نمایی و کوچک نمایی در مرورگر ها استفاده کنید
تنظیم اندازه ی فونت با Em
برای اینکه کاربران بتوانند اندازه ی متون را تغییر دهند (در منوی مرورگر)، برخی از توسعه دهندگان از em به جای پیکسل استفاده میکنند.
واحد اندازه ی em توسط W3C توصیه شده است.
1em برابر با اندازه ی فونت جاریست. اندازه ی پیشفرض برای متون در مرورگر ها برابر با 16 پیکسل است. بنابراین اندازه ی پیشفرض 1em برابر با 16 پیکسل است.
اندازه ها میتوانند از مقدار پیکسل به em با استفاده از این فرمول محاسبه شوند : pixels/16=em
} h1
/* font-size : 2.5em ;/* 40px/16=2.5em
{
} h2
/* font-size : 1.875em ;/* 30px/16=1.875em
{
} p
/* font-size : 0.875em ; /* 14px/16=0.875em
{
در مثال بالا اندازه های به کار برده شده همان اندازه های مثال قبل هستند با این تفاوت که این بار با واحد em نوشته شده اند. با این حال با استفاده از اندازه em، امکان تنظیم اندازه ی متون در تمام مرورگر ها وجود دارد.
متاسفانه همچنان مشکلاتی با نسخه های قدیمی تر اینترنت اکسپلورر در مورد اندازه ی متون وجود دارد.
استفاده از ترکیبی از درصد و em
روشی که در تمام مرورگر ها کار میکند، تنظیم یک مقدار پیشفرض صفت font-size به درصد برای عنصر body است :
} body
;font-size : 100%
{
} h1
;font-size : 2.5em
{
} h2
;font-size : 1.875em
{
} p
;font-size : 0.875em
{
اکنون کد ما به بهترین حالت کار میکند! در تمام مرورگر ها اندازه ی متون یکسان است و به همه مرورگر ها اجازه بزرگنمایی و کوچک نمایی و تغییر اندازه ی متن داده شده است.
صفت font-weight
صفت font-weight وزن یک فونت را مشخص میکند :
} p.normal
; font-weight : normal
{
} p.thick
; font-weight : bold
{