عریض تر کردن متن در طراحی سایت

عریض تر کردن متن در طراحی سایت

در بعضی از خانواده فونت ها٬ انواعی دارند که دارای حروف کم عرض تر یا باریک تر هستند. آن ها غالبا نام هایی مانند Condensed ٬ Wide ٬ Ultra Expanded و … دارند. کاربرد این ها این است که یک طراح می تواند از یک font family استفاده کند در حالی که هم از نوع عریض و هم از نوع کم عرض تر آن استفاده می کند. این کار با font-stretching امکان پذیر می شود.

این خاصیت اختیاری است و میزان کشیدگی کاراکترها را مشخص می کند.

عریض تر کردن متن در طراحی سایت

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

این قابلیت با قابلیت font-size که میتونه سایز فونت رو در هر فونت و هر زمانی به راحتی تغییر بده٬ خیلی متفاوته.

همانطوری که گفتیم٬ اگر حالت عریض تر برای یک فونت تعریف شده باشد٬ ای خاصیت عمل می کند.

برای مثال٬ فونت رایج verdana که فقط یک نوع گستردکی دارد. خاصیت font-stretch برای این فونت برابر normal است. با اعمال قطعه کد زیر ٬ این فونت تغییری نخواهد کرد:

body {font-family: Verdana;}
   strong {font-stretch: extra-expanded;}
   footer {font-stretch: extra-condensed;}

اگر فونت verdana عرض ها ی مختلفی داشته باشد٬ با اعمال این قطعه کد٬ نتیجه متفاوت خواهد بود:

body {font-family: Verdana;}
   strong {font-stretch: extra-expanded;}
   footer {font-stretch: extra-condensed;}

عریض تر کردن متن در طراحی سایت

برای نحوه ی کار این خاصیت هم توجه شما رو به توضیحات زیر جلب میکنم: 😉

 

ultra-condensed متن را تا جایی که امکان دارد باریک و فشرده نمایش می دهد.
extra-condensed متن را باریک تر از حالت condensed می کند، اما نه باریک تر از حالت ultra-condensed.
condensed متن را باریک تر از حالت semi-condensed می کند، اما نه باریک تر از حالت extra-condensed.
semi-condensed متن را باریک تر از حالت normal می کند، اما نه باریک تر از حالت condensed.
normal مقدار پیشفرض. هیچ فونتی کشیده نمی شود.
semi-expanded متن را کشیده تر از حالت نرمال می کند، اما نه نه کشیده تر از حالت eapanded.
expanded متن را کشیده تر از حالت semi-expanded می کند، اما نه نه کشیده تر از حالت extra-expanded.
extra-expanded متن را کشیده تر از حالت expanded می کند، اما نه نه کشیده تر از حالت ultra-expanded.
ultra-expanded متن را تا جایی که امکان دارد کشیده می کند.
inherit میزان کشیده شدن متن از والدش ارث می بری می شود.

 

@font-face {
       font-family: "SwitzeraADF";
       font-stretch: normal;
       src: url("SwitzeraADF-Regular.otf") format("opentype");
    }
    @font-face {
       font-family: "SwitzeraADF";
       font-stretch: condensed;
       src: url("SwitzeraADF-Cond.otf") format("opentype");
    }
    @font-face {
       font-family: "SwitzeraADF";
       font-stretch: expanded;
       src: url("SwitzeraADF-Ext.otf") format("opentype");
}

 

@font-face {
       font-family: "SwitzeraADF";
       font-stretch: normal;
       src: url("SwitzeraADF-Regular.otf") format("opentype");
    }
    @font-face {
       font-family: "SwitzeraADF";
       font-stretch: condensed;
       src: url("SwitzeraADF-Cond.otf") format("opentype");
    }
    @font-face {
       font-family: "SwitzeraADF";
       font-stretch: expanded;
       src: url("SwitzeraADF-Ext.otf") format("opentype");
}

عریض تر کردن متن در طراحی سایت

 

و در نهایت هم این که اکثر مرورگر ها این خاصیت را پشتیبانی نمی کنند.

عریض تر کردن متن در طراحی سایت

 

این مبحث هم به پایان رسید.

موفق و موید باشید.

‎یک نظر عریض تر کردن متن در طراحی سایت

پاسخ دهید

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