آموزش مقدماتی CSS خواص مقدماتی (قلم و نوشته) – جلسه دوم

در جلسه با قبل از آموزش css با نحوه استایل دهی به متن و نوشته آشنا شدید که بهتر است قبل از خواندن مطالب این جلسه ، جلسه اول را مطالعه فرمایید.

در این جلسه از آموزش با خاصیت های قلم در css آشنا خواهید شد که توسط این خواص می توان نوع ، اندازه و جلوه های مختلف را برای قلم نوشته در صفحات وب HTML تعیین کرد .

این مجموعه در یک خاصیت اصلی به نام Font قرار دارد که در ادامه ویژگی های خواص font را بحث خواهیم کرد ، این ویژگی ها شامل لیست زیر می باشند :

  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight

 

استایل دهی به font (فونت)

 

خاصیت font-family :

نام خاصیت مقدار قابل قبول توضیح
font-family font name توسط این خاصیت می توان از یک لیست آماده ، یک قلم را به عنوان قلم نوشته تعیین کنید .

نکته : اگر نام قلمی در این قسمت ذکر شود و مرورگر در هنگام نمایش صفحه آن قلم را نداشته باشد ، به جای آن از قلم پیش فرض خود استفاده می کند

نحوه استفاده از این خاصیت :

< p style="font-family: Arial" >
   Font of this paragraph is Arial.
< /p >

 

خاصیت font-size :

نام خاصیت مقدار قابل قبول توضیح
font-size xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
درصد %
توسط این خاصیت می توان اندازه فونت نوشته را تعیین کرد که می تواند یکی از حالات زیر باشد :
xx-small : اندازه قلم بسیار کوچک
x-small : اندازه قلم کمی کوچک
small : اندازه قلم کوچک
medium : اندازه قلم متوسط
large : اندازه قلم بزرگ
x-large : اندازه قلم کمی بزرگ
xx-large : اندازه قلم بسیار بزرگ
larger : اندازه قلم نوشته نسبت به خطوط همجوار خود کمی بزرگتر
smaller : اندازه قلم نوشته نسبت به خطوط همجوار خود کمی کوچکتر
length : اندازه قلم نوشته بر حسب واحدی مثل پیکسل ( px ) و یا نقطه ( pt ) تعیین می شود
درصد % : اندازه قلم نوشته نسبت به عنصر مادر و یا حالت نرمال ، بر حسب درصد بیان م شود

نحوه استفاده از این خاصیت :

< p style="font-size: small" >
   This part has a small font
< /p >

 

خاصیت font-style :

 

نام خاصیت مقدار قابل قبول توضیح
font-style normal
italic
oblique
این خاصیت برای اعمال جلوه های نمایشی بر روی فونت به کار می رود که می تواند یکی از حالات زیر باشد :
normal : نوشته بدون جلوه و استاندارد
italic : نوشته به صورت خط کج
oblique : نوشته به صورت مورب

نحوه استفاده از این خاصیت :

< p style="font-style: italic" >
   This part has italic text
< /p >

خاصیت font-variant :

نام خاصیت مقدار قابل قبول توضیح
font-variant normal
small-caps
توسط این خاصیت می توان نوشته را به صورت معمولی یا normal و یا حروف بزرگ یا small-caps نمایش داد

 

نحوه استفاده از این خاصیت :

< p style="font-variant: small-caps" >
This Part Has Small-caps Text
< /p >

خروجی مثال بالا :

This Part Has Small-caps Text

خاصیت font-weight :

نام خاصیت مقدار قابل قبول توضیح
font-weight normal
bold
bolder
lighter
۱۰۰
۲۰۰
۳۰۰
۴۰۰
۵۰۰
۶۰۰
۷۰۰
۸۰۰
۹۰۰
با استفاده از این خاصیت میزان ضخامت فونت نوشته مشخص می شود ، این خاصیت می تواند در یکی از حالات زیر به کار رود :
normal : میزان ضخامت قلم نوشته به صورت معمولی
bold : قلم نوشته به صورت توپر
bolder : قلم نوشته به صورت خیلی توپر
lighter : قلم نوشته کمی نازکتر از حالت معمولی
۱۰۰ تا ۹۰۰ : به وسیله این مقادیر عددی میزان ضخامت نوشته را تعیین می شود ، که بزرگی عدد انتخاب شده رابطه مستقیم با ضخامت فونت دارد

نحوه استفاده از این خاصیت :

< p style="font-weight: bold" >
   This part has bold text
< /p >

از ویژگی های خاصیت font می شود به صورت یک جا نیز استفاده کرد که شکل کلی آن به صورت زیر می باشد

font : [ font-family ] [ font-size ] [ font-style ] [ font-variant ] [ font-weight ] 

نگارش و انتشار توسط میلاد صادقیان

فعال در زمینه های : برنامه نویسی پویا تحت ویندوز ، طراحی رابط کاربری UI ، توسعه و طراحی وب

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.