font-size Property
ویژگی font-size
در CSS برای مشخص کردن اندازه فونت در عنصر بکار می رود.
نحوه نوشتار
/* مقادیر با کلیدواژه */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large; /* مقادیر مرتبط */ font-size: smaller; font-size: larger; /* مقادیر با واحد های اندازه */ font-size: 23px; font-size: 1.3em; /* مقادیر با درصد */ font-size: 80%;
مقادیر
xx-small , x-small , small , medium , large , x-large , xx-large , xxx-large
اندازه مشخصیست بر مبنای اندازه پیشفرض فونت که برابر با medium
است.
larger, smaller
اندازه مرتبطیست با اندازه فونت عنصر والد.
اندازه (طول)
اندازه فونت را بر مبنای واحدهای اندازه در CSS تعیین می کند. مانند: px
, cm
, em
, rem
. این اندازه باید مثبت باشد.
درصد
اندازه فونت را بر اساس اندازه فونت در عنصر والد تعیین می کند.
در مثال زیر عملکرد این ویژگی را میبینیم:
html
<p>این یک متن نمونه است. این مقدار پیشفرض و برابر است با medium</p> <p class="x-small">این یک متن نمونه است. (x-small)</p> <p class="xx-large">این یک متن نمونه است. (xx-large)</p> <p class="em">این یک متن نمونه است. (em)</p> <p class="rem">این یک متن نمونه است. (rem)</p> <p class="per">این یک متن نمونه است. (درصد)</p>
css
p { padding: 10px 20px; background-color: #444; margin: 8px 0 0 0; color: #fff; } .x-small { font-size: x-small; } .xx-large { font-size: xx-large; } .em { font-size: 1.2em; } .rem { font-size: 1.2rem; } .per { font-size: 160%; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.