ویژگی font-size در CSS

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 پشتیبانی می کنند.