font-size

بوسیله ویژگی 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 خواهد بود.

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

 

See the Pen font-size by Mojtaba Seyedi (@seyedi) on CodePen.


 

از آنجایی که واحدهایی مثل 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 */
}


 

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

6 دیدگاه برای “font-size

  1. بسیار عالی
    ممنون
    چند وقت بود مطلب جدید نمیزاشتین
    راستی مطالبی که توی کانال تلگرام میزارین عالین حیف که هیچ راهی نیست اونجا ازتون تشکر کنیم یا نظری راجبه مطالب بدیم

    1. ممنون از پیامتون

      تا یه ماه دیگه به امید خدا از این اوضاع بی پستی و پستای خواب آور رد می شیم :)

      خواهش میکنم. خوشحالم که مفید بوده. موفق باشید.

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

  3. سلام و درود
    ممنون از سایت عالیتون
    با توجه به توضیحات خودتون در پاراگراف آخر کلمه rem در جمله (مثلا اگر عرض و ارتفاع یک عنصر با استفاده از واحد rem مشخص شوند) منظورتون em است، درسته :)

    1. سلام، ممنون از شما

      نه منظورم همون rem بوده، البته em هم می تونه باشه. توی پاراگراف قبلش گفته شده که این اتفاق برای همشون میافته. توی این پاراگراف فقط با rem مثال زده.

      ممنونم

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *