در جلسه با قبل از آموزش css با نحوه استایل دهی به متن و نوشته آشنا شدید که بهتر است قبل از خواندن مطالب این جلسه ، جلسه اول را مطالعه فرمایید.
در این جلسه از آموزش با خاصیت های قلم در css آشنا خواهید شد که توسط این خواص می توان نوع ، اندازه و جلوه های مختلف را برای قلم نوشته در صفحات وب HTML تعیین کرد .
این مجموعه در یک خاصیت اصلی به نام Font قرار دارد که در ادامه ویژگی های خواص 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 ]
