در این قسمت از آموزش CSS، ویژگی Font-Size را برای شما توضیح می‌دهیم.
با استفاده از ویژگی Font-Size در طراحی سایت سایز قلم متن را انتخاب می‌کنند. این خاصیت دارای حالت‌های مختلفی می‌باشد که عبارتند از:
Xx-Small: این قلم سایز متن نوشته شده را به صورت خیلی کوچک قرار می‌دهد.
X-Small: این قلم سایز متن نوشته شده را به صورت کمی کوچک در می‌آورد.
Small: با استفاده از این قلم سایز نوشته کوچک می‌شود.
Medium: این قلم سایز متن را متوسط نشان می‌دهد.
Large: این قلم سایز نوشته را در طراحی سایت بزرگ نشان می‌دهد.
X-Large: این قلم سایز نوشته را کمی بزرگ نشان می‌دهد.
Xx-Large: اندازه‌ی قلم بسیار بزرگ می‌شود.
Larger: سایز متن نوشته شده نسبت به سایز خطوط همجوار کمی بزرگتر دیده می‌شود.
Smaller: سایز متن نوشته شده نسبت به سایر خطوط همجوار کمی کوچکتر دیده می‌شود.
Length: این حالت اندازه‌ی قلم متن را بر حسب واحدی مانند پیکسل و یا نقطه (pt) تعیین می‌کند.
درصد %: این حالت اندازه قلم متن را نسبت به عنصر مادر و یا حالت استاندارد، برحسب درصد تعیین می کند.
مثال زیر کاربرد ویژگی Font-Size را در بخش آموزش Css نشان می‌دهد.
< p style="color: Maroon; font-family: Arial" >
< span style="font-size: small ; color : green" > This part has a small font < /span >
< span style="font-size: medium ; color : blue" > This part has a medium font < /span >
< span style="font-size: x-large color : red" > This part has a big font < /span >
< span style="font-size: 20px; color: Navy" > And size of font of this is 20px . < /span >
< /p >
خروجی:
This part has a small font
This part has a medium font
This part has a big font
And size of font of this is 20px