کار با فونت (Font) در css:
همانطور که قبلا گفتیم، css به عنوان ابزاری کمکی در شکل دهی ظاهر محتوای صفحاوت وب (html) کابرد دارد، به عبارتی از آن برای ایجاد استایل های مورد نظر برای عناصر صفحات وب که می تواند به فرض فونت مطالب باشد، استفاده می شود.
تنظیم حروف چپ به راست یا راست به چپ با direction:
در css برای نمایش حروف راست به چپ (مثل زبان فارسی)، از عنصر direction استفاده می کنند.
<style type="text/css">
body{
direction:rtl;
}
</style>
direction می تواند مقادیر rtl برای حروف فارسی یا ltr برای حروف انگلیسی داشته باشد.
تعریف فونت در :css
در css فونت را در حالت کلی به شیوه های زیر تعریف می کنند.
تعریف مستقیم فونت:
<style type="text/css">
body{
font:Tahoma, Geneva, sans-serif
}
</style>
تعریف خانواده فونت:
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
}
</style>
خانواده یک فونت می توانید برای مثال یکی از مقادیر زیر باشد:
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- Arial, Helvetica, sans-serif (مناسب برای حروف فارسی)
- Tahoma, Geneva, sans-serif (پرکاربردترین فونت برای حروف فارسی در وب)
فونت های بالا به ترتیب اولویت توسط مرورگر بررسی می شوند، اگر در سیستم کاربر فونت اول بود، دیگر از فونت های بعدی استفاده نمی شود، ولی اگر فونت اول وجود نداشت، نوبت به استفاده از فونت های بعدی می رسد، ذکر یک نکته ضروری است: استفاده از فونتهایی که در سیستم کاربران به طور پیش فرض وجود ندارد (مثل برخی از فونت های فارسی)، ممکن است موجب شود که کاربران صفحه شما، به همان شکلی که شما آن را می بینید، نتوانند مطالب را ببینند (به این دلیل که آن فونت خاص در سیستم آنها نصب نیست، لذا با نوع دیگری جایگزین می شود).
اندازه فونت یا font-size:
اندازه فونت ها در css با مقادیر px، em یا به صورت عبارات مشخص می شوند.
<style type="text/css">
body{
font-size:12px;
}
</style>
علاوه بر مقادیر پیکسلی می توان از em و یا عبارت تعریف شده در css استفاده کرد (البته توصیه می کنیم فقط از px استفاده کنید، چرا که استانداردتر است و در تمام مرورگرها به یک شکل پردازش می شود)؛ عباراتی که برای اندازه فونت به کار می روند عبارتند از:
- large (بزرگ)
- larger (بزرگتر از بزرگ)
- medium (معمولی)
- small (کوچک)
- smaller (کوچکتر از کوچک)
- x-large و xx-large (به ازای هر x یک مقدار بزرگتر از large)
- x-small و xx-small (به ازای هر x یک مقدار کوچکتر از small)
مقادیر پیکسلی به طور استاندارد از 9، 10، 12 شروع و به 36 ختم می شوند، مقادیر em از حاصل تقسیم مقادیر پیکسلی بر عدد 16 (16 اندازه پیش فرض فونت در مرورگر است) به دست می آید، مثلا 30px مساوی است با 1.875em، در مثال زیر از em استفاده شده است.
<style type="text/css">
body{
font-size:0.875em;
}
</style>
کشیدگی (stretch) فونت:
<style type="text/css">
body{
font-stretch:condensed;
}
</style>
stretch یا کشیدگی فونت بیشتر در مورد حروف لاتین کاربرد دارد، با این حال مقادیر زیر را می توان برای stretch در نظر گرفت.
- condensed (فشرده)
- expanded (بسیط)
- extra-condensed (خیلی فشرده)
- extra-expanded (خیلی بسیط)
- narrower (باریک)
- normal (عادی)
- semi-condensed (تقریبا فشرده یا نیمه فشرده)
- ultra-condensed (خیلی خیلی فشرده)
- ultra-expanded (خیلی خیلی بسیط)
- wider (عریض)
استایل فونت یا font-style:
از استایل فونت می توان برای ایجاد متون کج شده یا مایل استفاده کرد.
<style type="text/css">
body{
font-style:oblique;
}
</style>
مقادیر استایل فونت:
- oblique (مایل)
- italic (کج)
- normal (عادی)
ضخامت فونت یا font-weight:
در css برای برجسته کردن یک فونت، می توان این کار را با خاصیت font-weight انجام داد، font-weight و font-style در css تقریبا عملکردی شبیه تگ های b، strong، em و i در html دارند.
<style type="text/css">
body{
font-weight:bold;
}
</style>
برای ضخامت فونت می توانیم از مقادیر زیر استفاده کنیم.
- مقادیر عددی به صورت ضریبی از 100 تا 900 (100، 200، 300 تا 900).
- bold (ضخیم)
- bolder (خیلی ضخیم)
- lighter (نازک و سبک)
نکته: چند خاصیت دیگر نیز در css3 برای فونت وجود دارد که یا توسط برخی مرورگرها پشتیانی نمی شود یا اینکه کاربرد چندانی ندارد، از جمله font-size-adjust و font-variant.
برای آشنایی بیشتر با خاصیت های مربوط به فونت، در مثال زیر ما یک کلاس فرضی تعریف کرده ایم و متن موجود در آن را با عناصر فونت تنظیم نموده ایم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کار با فونت در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
.example{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
direction:rtl;
}
</style>
</head>
<body>
<div class="example">
این متن به عنوان مثال با استفاده از ویژگی های فونت در css تنظیم شده است.
</div>
</body>
</html>
پیش نمایش
تنظیمات متن (text) در css:
تعریف نوع فونت و ویژگی های آن، گام اول برای نمایش محتوا در css است، در قدم بعدی نیاز به تنظیم چینش مطالب و نحوه نمایش آنها است، این ویژ گی ها با text و زیرمجموعه های آن ایجاد می شوند.
تنظیم تراز و چینش متن با text-align:
برای اینکه متن خود را به صورت راست چین یا چپ چین و... تنظیم کنید، باید از text-align و یکی از مقادیر زیر استفاده نمائید.
- center (تنظیم گوشه های متن در وسط)
- justify (تمام چین کردن متن، پوشش از سمت چپ و راست)
- left (چپ چین کردن متن)
- right (راست چین کردن متن)
مثال:
<style type="text/css">
body{
text-align:justify;
}
</style>
تزئین متن با text-decoration:
در css متن (و مخصوصا لینک) را با text-decoration تنظیم می کنند، مثلا اگر از این گزینه استفاده نکنید، بیشتر مرورگرها، لینک ها را به صورت متن زیرخط دار نشان می دهند.
مقادیری که در text-decoration استفاده می شود:
- blink (متن چشمکزن)
- line-through (متنی که خطی از داخلش گذشته یا بر روی آن خط کشیده شده)
- none (بدون موارد اضافه و حالت عادی)
- overline (متن با خطی روی آن)
- underline (متن زیر خط دار)
مثال:
<style type="text/css">
body{
text-decoration:none;
}
</style>
میزان فشردگی متن یا text-indent:
از این قابلیت بیشتر برای حروف انگلیسی (که بین آنها فاصله است) استفاده می شود و مقادیر آن را با پیکسل تعریف می کنند.
مثال:
<style type="text/css">
body{
text-indent:45px;
}
</style>
ایجاد سایه متن یا text-shadow:
text-shadow قابلیتی است که در css3 افزوده شده است، از این عنصر برای ایجاد سایه متن استفاده می شود؛ روش ایجاد آن به طور کلی به صورت زیر است:
<style type="text/css">
body{
text-shadow:5px 5px 2px #666;
}
</style>
اعداد در عبارت بالا به ترتیب نشانه فاصله افقی (horizontal shadow)، فاصله عمودی (vertical shadow)، فاصله ماتی (blur) و رنگ سایه است.
نکته: این امکان در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود.
نمایش کوچک بزرگی حروف با text-transform:
text-transform قابلتی است در css که بیشتر برای حروف انگلیسی کاربرد دارد، چرا که می توان با آن حروف را بزرگ یا کوچک نشان داد، مقادیر text-transform عبارتند از:
- capitalize (حروف اول بزرگ نشان داده می شود)
- lowercase (تمام حروف کوچک نشان داده می شوند)
- uppercase (تمام حروف بزرگ نشان داده می شوند)
مثال:
<style type="text/css">
body{
text-transform:uppercase;
}
</style>
در خاتمه این بحث، توجه شما را به مثالی آنلاین جلب می کنیم که در آن، متنی فرضی را با عناصر تنظیم کننده، شکل داده ایم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تنظیمات متن در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
.text{
width:200px;
height:auto;
border:1px solid #666;
padding:4px;
margin-left:auto;
margin-right:auto;