ویژگی font-stretch در css اشکال فونت طبق عرض کاراکتر

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت font-stretch در زبان css توضیحاتی را ارائه نماییم.

ویژگی font-stretch در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

ویژگی font-stretch در css اشکال فونت طبق عرض کاراکتر

ویژگی font-stretch در css اشکال فونت طبق عرض کاراکتر

معرفی ویژگی کاربردی font-stretch در زبان طراحی css

توسط خاصیت font-stretch می توانیم اشکال مختلف یک فونت را براساس عرض کاراکترها بر روی تگ html مورد نظر انتخاب کنیم.

به وسیله خاصیت جدید font-stretch شما اجازه دارید کاراکتر های یک فونت را عریض تر و یا باریک تر کنید.

نکات مهم

1- مرورگر کاربر قادر به شناسایی تغییر عرض کاراکتر های یک فونت نیست. در حقیقت تنها در حالتی که صورت مخصوص به تغییر عرض کاراکترها برای خانواده آن فونت تعریف شده باشد خصوصیت font-stretch اعمال می گردد.

2- خاصیت جدید font-stretch تنها برای فونت های استاندارد که صورت مخصوص تغییر عرض کاراکتر در آنها تعریف شده کاربرد دارد.

3- اکثریت فونت هایی که دارای صورت مخصوص تغییر عرض فونت هستند، تمام مقدار عریض کردن و یا باریک کردن کاراکترها را در خود جای ندادند. لذا تنها مقادیر تعریف شده اعمال می شود.

مقادیر صفت کاربردی font-stretch در زبان طراحی سی اس اس

صفت کاربردی font-stretch که در زبان طراحی CSS3 معرفی شده است، 11 مقدار می پذیرد که عبارتند از:

  1. مقدار ultra-condensed
  2. مقدار extra-condensed
  3. مقدار condensed
  4. مقدار semi-condensed
  5. مقدار normal
  6. مقدار semi-expanded
  7. مقدار expanded
  8. مقدار extra-expanded
  9. مقدار ultra-expanded
  10. مقدار initial
  11. مقدار inherit

مقدار ultra-condensed درون خاصیت font-stretch در زبان سی اس اس

اگر خاصیت font-stretch را برابر با مقدار ultra-condensed قرار دهیم، در این صورت می خواهیم صورت مخصوص خیلی خیلی باریک برای کاراکترها در فونت مورد نظر بر روی تگ html مربوطه اعمال شود.

ویژگی font-stretch در css اشکال فونت طبق عرض کاراکتر

مثال براساس مقدار ultra-condensed برای خاصیت font-stretch

مقدار extra-condensed درون خاصیت font-stretch در زبان سی اس اس

اگر خاصیت font-stretch را برابر با مقدار extra-condensed قرار دهیم، در این صورت می خواهیم صورت مخصوص خیلی باریک برای کاراکترها در فونت مورد نظر بر روی تگ html مربوطه اعمال شود.

مثال براساس مقدار extra-condensed برای خاصیت font-stretch

مقدار condensed درون خاصیت font-stretch در زبان سی اس اس

اگر خاصیت font-stretch را برابر با مقدار condensed قرار دهیم، در این صورت می خواهیم صورت مخصوص باریک برای کاراکترها در فونت مورد نظر بر روی تگ html مربوطه اعمال شود.

مثال براساس مقدار condensed برای خاصیت font-stretch

ویژگی font-stretch در css اشکال فونت طبق عرض کاراکتر

مقدار semi-condensed درون خاصیت font-stretch در زبان سی اس اس

اگر خاصیت font-stretch را برابر با مقدار semi-condensed قرار دهیم، در این صورت می خواهیم صورت مخصوص کمی باریک برای کاراکترها در فونت مورد نظر بر روی تگ html مربوطه اعمال شود.

مثال براساس مقدار semi-condensed برای خاصیت font-stretch

مقدار normal درون خاصیت font-stretch در زبان سی اس اس

اگر خاصیت font-stretch را برابر با مقدار normal قرار دهیم، در این صورت می خواهیم صورت مخصوص پیش فرض برای کاراکترها در فونت مورد نظر بر روی تگ html مربوطه اعمال شود.

مثال براساس مقدار normal برای خاصیت font-stretch

مقدار normal به عنوان مقدار پیش فرض صفت font-stretch می باشد.

ویژگی font-stretch در css اشکال فونت طبق عرض کاراکتر

مقدار semi-expanded درون خاصیت font-stretch در زبان سی اس اس

اگر خاصیت font-stretch را برابر با مقدار semi-expanded قرار دهیم، در این صورت می خواهیم صورت مخصوص کمی پهن برای کاراکترها در فونت مورد نظر بر روی تگ html مربوطه اعمال شود.

مثال براساس مقدار semi-expanded برای خاصیت font-stretch

مقدار expanded درون خاصیت font-stretch در زبان سی اس اس

اگر خاصیت font-stretch را برابر با مقدار expanded قرار دهیم، در این صورت می خواهیم صورت مخصوص پهن برای کاراکترها در فونت مورد نظر بر روی تگ html مربوطه اعمال شود.

مثال براساس مقدار expanded برای خاصیت font-stretch