تنظیم فونت با CSS

تنظیم فونت صفحه با استفاده از استایل

Font

در این قسمت به روش تنظیم فونت متن با استفاده از استایل می پردازیم. بسیاری از اعمالی را که قبلاً با تگ <font> انجام می دادیم می توانیم با استایل انجام دهیم.

font-family

ویژگی font-family مشخص می کند که متن با چه فونتی باید نشان داده شود. این ویژگی در حقیقت جانشین شناسه face که در تگ font استفاده می شود است. گزینه پیش فرض برای فونت ممکن است در مرورگرهای مختلف تفاوت داشته باشد، اما معمولاً Times New Roman است.

در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم:

<div style="font-family: Arial">این متن با فونت Arial نمایش داده می شود.</div>

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

این متن با فونت Arial نمایش داده می شود.

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

 


font-size

این ویژگی مشخص کننده اندازه فونت در صفحه می باشد. گزینه پیش فرض برای این ویژگی medium است.

فرض کنید می خواهیم متن درون یک DIV با اندازه 30 پیکسل نمایش داده شود:

<div style="font-size: 30px">این متن با اندازه 30 پیکسل نمایش داده می شود.</div>

نتیجه را ملاحظه کنید:

این متن با اندازه 30 پیکسل نمایش داده می شود.

 


font-style

کار این ویژگی تقریباً شبیه تگ <I> در HTML است، اما چون استفاده از تگهایی نظیر <FONT>, <B>, <U> و <I> در حال کمرنگ شدن است بهتر است از استایل برای مورب نشان دادن متن استفاده شود.این ویژگی می تواند مقادیر زیر را داشته باشد:

  • normal
  • italic
  • oblique

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

<div style="font-style:oblique">این متن به صورت مورب مشاهده می شود.</div>

نتیجه به این صورت خواهد بود:

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

 


font-weight

این ویژگی به ما امکان می دهد تا میزان ضخامت متن را تعیین کنیم. می توانیم از مقادیر زیر برای این ویژگی استفاده کنیم:

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

در اینجا به ذکر یک مثال می پردازیم:

<div style="font-weight: 700">این متن تقریباً ضخیم مشاهده می شود.</div>

نتیجه به این صورت خواهد بود:

این متن تقریباً ضخیم مشاهده می شود.
نظرات 1 + ارسال نظر
افزایش آمار دوشنبه 14 دی‌ماه سال 1388 ساعت 01:02 ب.ظ

سلام ،
لینک باکس لینکینگ بلاگ اسکای افتتاح شد
برای افزایش چشم گیر آمار و تعداد بازدیدکننگان وبلاگتان کد زیر را در ابتدا یا انتهای قالب وبلاگتان قرار دهید و سپس از طریق ارسال لینک ، لینک خود را برای ما ارسال کنید تا لینک شما در لینک باکس قرار گیرد .
----------------------------------------------------------------------
مزایای استفاده از لینک باکس این است که با این کار وبلاگ شما با تمام وبلاگ هایی که لینک آنها در لینک باکس قرار دارد تبادل لینک داده می شود .
یعنی وقتی شما لینک وب خود را در لینک باکس قرار دهید در واقع با تمام وبلاگ هایی که در لینک باکس هستند تبادل لینک انجام داده اید و این یعنی : « افزایش چشمگیر ، سریع و فوق العاده ی آمار بازدیدکنندگانتان و همچنین افزایش پیج رنکتان در گوگل .»
----------------------------------------------------------------------
اما مزایای لینک باکس ما :
1- لینک باکس ما اولین لینک باکس رسمی موجود در سرویس دهنده BlogSky می باشد .
2- سادگی بالای آن
3- حجم فوق العاده کم و کلیک بالای لینک باکس
(حجم کم مشخصه ی مهمی برای یک لینک باکس است چون به هیچ وجه باعث کاهش سرعت لودینگ سایت نمیشود)
---------------------------------------------------------------------
دریافت کد : (کد زیر را در ابتدا یا انتهای قالب خود کپی کنید)

<center><iframe border="1" frameborder="1" width="470" height="300" name="linkbox" src="http://linking.blogsky.com"></iframe></center>

---------------------------------------------------------------------
سپس از طریق آدرس زیر لینک خود را برای ما ارسال کنید تا لینک شما در لینک باکس قرار گیرد .
http://linking.blogsky.com/Comments.bs?PostID=1
---------------------------------------------------------------------
با لینک باکس ما منتظر افزایش آمار خود باشید .

برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
ایمیل شما بعد از ثبت نمایش داده نخواهد شد