امتیاز موضوع:
  • 10 رأی - میانگین امتیازات: 2.4
  • 1
  • 2
  • 3
  • 4
  • 5
تنظیم فونت صفحه با استفاده از استایل(CSS)
#1
در این قسمت به روش تنظیم فونت متن با استفاده از استایل می پردازیم. بسیاری از اعمالی را که قبلاً با تگ <font> انجام می دادیم می توانیم با استایل انجام دهیم.

[تصویر:  adobe-blueprint-css-icon.png]
font-family
ویژگی font-family مشخص می کند که متن با چه فونتی باید نشان داده شود. این ویژگی در حقیقت جانشین شناسه face که در تگ font استفاده می شود است. گزینه پیش فرض برای فونت ممکن است در مرورگرهای مختلف تفاوت داشته باشد، اما معمولاً Times New Roman است.
در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم:


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

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


[تصویر:  13459742101.bmp]


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


font-size
این ویژگی مشخص کننده اندازه فونت در صفحه می باشد. گزینه پیش فرض برای این ویژگی medium است.
فرض کنید می خواهیم متن درون یک DIV با اندازه 30 پیکسل نمایش داده شود:


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

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


[تصویر:  13459744081.bmp]


[تصویر:  Fonts-icon.png]
font-style
کار این ویژگی تقریباً شبیه تگ <I> در HTML است، اما چون استفاده از تگهایی نظیر <FONT>, <B>, <U> و <I> در حال کمرنگ شدن است بهتر است از استایل برای مورب نشان دادن متن استفاده شود.این ویژگی می تواند مقادیر زیر را داشته باشد:
  • normal
  • italic
  • oblique
به یک مثال در مورد این ویژگی توجه کنید:


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

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

[تصویر:  13459747771.bmp]



[تصویر:  folder-fonts-icon.png]
font-weight
این ویژگی به ما امکان می دهد تا میزان ضخامت متن را تعیین کنیم. می توانیم از مقادیر زیر برای این ویژگی استفاده کنیم:
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
در اینجا به ذکر یک مثال می پردازیم:


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

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


[تصویر:  13459751491.bmp]
پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل انجمن مخ ها 0 243 27-08-2012، 09:06 PM
آخرین ارسال: انجمن مخ ها
  تغییر شکل نشانگر ماوس با استفاده از استایل انجمن مخ ها 0 240 27-08-2012، 08:58 PM
آخرین ارسال: انجمن مخ ها
  کار با تصویر زمینه در طراحی صفحات با استایل انجمن مخ ها 0 261 26-08-2012، 06:53 PM
آخرین ارسال: انجمن مخ ها
  تغییر موقعیت عناصر صفحه با استفاده از CSS انجمن مخ ها 0 216 25-08-2012، 10:57 PM
آخرین ارسال: انجمن مخ ها
  تنظیم حاشیه و فاصله از لبه در عناصر صفحه انجمن مخ ها 0 219 25-08-2012، 08:23 PM
آخرین ارسال: انجمن مخ ها
  نحوه ایجاد کادر برای عناصر صفحه با استفاده از استایل انجمن مخ ها 1 280 25-08-2012، 07:32 PM
آخرین ارسال: انجمن مخ ها
  تنظیم عرض، ارتفاع، و overflow با CSS انجمن مخ ها 0 200 24-08-2012، 05:40 PM
آخرین ارسال: انجمن مخ ها

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان