بوسیله ویژگی font-size می توان اندازه فونت یک عنصر را مشخص کرد.

 

برای تعیین اندازه فونت می توان بصورت اندازه دهی مطلق یا نسبی عمل کرد.

روش مطلق از طریق واحدهای مطلق و کلمات کلیدی و روش نسبی از طریق استفاده از واحدهای نسبی و اندازه دهی درصدی می باشد.

ادامه مطلب

 

اندازه فونت یک ویژگی بصورت خودکار از عنصر پدرش به ارث می رسد که این بدین معنی است که اندازه فونت آن برابر اندازه فونت پدرش خواهد بود مگر اینکه برای خود عنصر این ویژگی مستقیما تعیین شود و اندازه فونت آن تغییر کند.

 

اندازه دهی مطلق

همانطور که گفته شد می توان از واحدهای مطلق برای اندازه دهی به این ویژگی استفاده کرد:

 

font-size: 18px;
font-size: 10pt;

 

همینطور می توان از کلمات کلیدی زیر نیز استفاده کرد که به ترتیب از خیلی خیلی کوچک تا خیلی خیلی بزرگ نوشته شده اند :)

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

 

font-size: small;
font-size: xx-large;

 

 

اندازه دهی نسبی

استفاده از واحدهای نسبی برای اندازه دهی به این ویژگی بسیار رایج است هرچند که نوع واحد انتخابی بستگی به شرایط زیادی دارد اما یکی از رایج ترین روش ها برای تعیین اندازه فونت استفاده از واحدهای نسبی به خصوص واحد em می باشد.

واحدهای نسبی برای بهبود دستیابی پذیری و نگهداری ماژول ها در پروژه بسیار ارزشمند و حائز اهمیت می باشند.

 

font-size: 2em;
font-size: 1.5rem;
font-size: 10vh;

 

همینطور استفاده از درصد نیز مجاز است که در این صورت اندازه فونت عنصر نسبت به اندازه فونت عنصر پدرش محاسبه می شود:

 

.parent {
  font-size: 20px;
}

.child {
  font-size: 50%; /* 10px */
}

 

همینطور دو کمله کلیدی نسبی نیز وجود دارند که می توان از آنها استفاده کرد:

• smaller
• larger

این دو کلمه کلیدی که به معنای کوچک تر و بزرگتر هستند که نسبت به عنصر پدر محاسبه می شوند.

مثلا اگر اندازه فونت پدر large باشد و برای عنصر فرزند از کلمه کلیدی larger یا بزرگتر استفاده شود در نهایت اندازه فونت فرزند x-large خواهد بود.

دموی زیر را بررسی کنید:

 

 

از آنجایی که واحدهایی مثل em, ex و rem کاملا مرتبط به ویژگی font-size می باشند تغییر اندازه فونت می توان بر روی ویژگی هایی که با این واحدهای نسبی اندازه دهی می شوند تاثیر بگذارد.

مثلا اگر عرض و ارتفاع یک عنصر با استفاده از واحد rem مشخص شوند زمانی که font-size آن عنصر تغییر کند متناسب با آن تغییرات، اندازه عرض و ارتفاع عنصر نیز تغییر خواهد کرد.

 

.element {
  font-size: 1rem; /* 16px */
  width: 5em;      /* 5 * 16 = 80px */
  height: 5em;     /* 5 * 16 = 80px */
}

/* حالا اندازه فونت رو تغییر میدیم */

.element {
  font-size: 2rem; /* 32px */
  width: 5em;      /* 5 * 32 = 160px */
  height: 5em;     /* 5 * 32 = 160px */
}

 

برای مطالعه واحدها نسبی به مطلب مربوط به آن مراجعه کنید.