خانه / دوره آموزش مقدماتی CSS / قسمت دوازدهم آموزش CSS – تنظیم فونت

قسمت دوازدهم آموزش CSS – تنظیم فونت

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

font-family

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

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

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

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


font-size

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

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

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

font-style

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

  • normal
  • italic
  • oblique

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

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

font-weight

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

  • normal
  • bold
  • bolder
  • lighter
  • ۱۰۰
  • ۲۰۰
  • ۳۰۰
  • ۴۰۰
  • ۵۰۰
  • ۶۰۰
  • ۷۰۰
  • ۸۰۰
  • ۹۰۰

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

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

نقد و بررسی

User Rating: Be the first one !

درباره ی آریـان پــور

سلام . آریــان پور هستم . از نویسندگان میکروپـدیا .. علاقه مــند به برنامه نویسی و طراحی وب و شبکه ! دیدگاه ها و نظرات شما دوستان بررسی میشه و باعث دلگرمـی برای نوشتن مطالب بهتر و به روزتر . در تماس باشید با : aryanpour [at] micropedia [dot] ir با مـا همراه باشید ..

همچنین ببینید

قسمت دهم آموزش CSS – کار با متن ها ۱

در این قسمت برخی از ویژگیهای متن را که در CSS استفاده می شوند به …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پاسخ عبارت زیر را وارد کنید: *