درباره Variable Font

در وریبل فونت انجمن شما فقط یک فایل دارید که با کم و زیادکردن متغیرها می‌توانید تعیین کنید وزن (ضخامت) فونت چقدر باشد علاوه بر وزن، ۲ متغیر دیگر نیز در فونت انجمن قابل تنظیم است که در ادامه با آن‌ها آشنا خواهید شد.

وقتی یک فایل فونت با حجم پایین‌تر و قابلیت بیشتر در اختیار شماست مطمئناً استفاده از وریبل فونت بر فونت‌های معمولی ارجحیت دارد اما یک مشکل وجود دارد.

مرورگرهای قدیمی از وریبل فونت پشتیبانی نمی‌کنند. مرورگرهایی که از وریبل فونت پشتیبانی می‌کنند:

گوگل کروم نسخه ۶۲ به بعد (تاریخ انتشار: مهرماه ۱۳۹۶)

اپرا نسخه ۴۹ به بعد (تاریخ انتشار: آذر ۱۳۹۶)

سافاری نسخه ۱۱ به بعد (تاریخ انتشار تیرماه ۱۳۹۷)

فایرفاکس نسخه ۶۲ به بعد (تاریخ انتشار: شهریورماه ۱۳۹۷)

مایکروسافت ادج نسخه ۱۷ به بعد (تاریخ انتشار : اردیبهشت ۱۳۹۷)

جای نگرانی نیست در ادامه این آموزش خواهید آموخت که چگونه فونت معمولی را پشتیبان وریبل فونت کنید تا اگر مرورگر قدیمی بود بجای وریبل فونت، فونت عادی لود شود و مشکلی ایجاد نشود.

بارگذاری فونت‌ها

ابتدا لازم است سه فایل فونت را بارگذاری کنیم:

1. AnjomanwebGX.woff وریبل فونت انجمن

2. Anjoman-regular.woff وب فونت انجمن وزن عادی

3. Anjoman-bold.woff وب فونت انجمن وزن بولد

بارگذاری وریبل فونت با استفاده از @font-face بسیار ساده است، همان‌طور که در این‌جا می‌توانید ببینید فونت متغیر را با نام متفاوت از فونت عادی مشخص کرده‌ایم و آن را 'Anjomanweb VF' نامیده‌ایم. نحوه بارگیری آن به صورت زیر است:

@font-face { 
    font-family: 'Anjomanweb VF';
    src: url('AnjomanwebGX.woff') format('woff-variations'),
    /* will be the standard and works in Safari now */
    url('AnjomanwebGX.woff') format('woff');
    /* for the other supporting browsers */
    font-display: fallback;
}

در حالت معمولی فونت انجمن را به صورت زیر بارگذاری می کنید و نام آن را Anjomanweb می گذاریم.

@font-face {
    font-family: Anjomanweb;
    src: url('staticfonts/Anjoman-regular.woff') format('woff');
}
@font-face {
    font-family: Anjomanweb;
    src: url('staticfonts/Anjoman-bold.woff') format('woff');
    font-weight: 700;
}

آیا مرورگرها هر سه فایل را بارگذاری می‌کنند؟ خیر . مرورگر فقط فونتی را بارگذاری می‌کند که نیاز داشته باشد. بنابراین اگر طبق این راهنما پیش بروید در مرورگرهای جدید فقط فایل وریبل فونت بارگذاری می‌شود و در مرورگرهای قدیمی فقط فونت‌های عادی و از بقیه صرف نظر می‌شود.

تنظیمات مربوط به جایگزینی فونت‌ها (fallback)

اگر بخواهیم به روش معمول ۲ فونت را فال‌بک (پشتیبان یکدیگر) کنیم کدها به این شکل خواهد بود:

body {
font-family: 'Anjomanweb VF', Anjomanweb, tahoma;
}

ولی این روش در اینجا برای ما کار نمی‌کند. و لازم است به روشی که در ادامه خواهید دید فونت عادی را پشتیبان فونت وریبل کنید.

در کدهای زیر برای تشخیص مرورگر از فیچر کوئری‌‌های @supports استفاده می‌کنیم.

دقت کنید که تمام مرورگرهایی که از وریبل فونت پشتیبانی می‌کنند از فیچرکوئری @supports هم پشتیبانی می‌کنند.

body {
    font-family: Anjomanweb, tahoma;
}
@supports (font-variation-settings: normal) {
    body {
     font-family: 'Anjomanweb VF', tahoma;
    }
}

کدهای بالا به این صورت عمل می‌کند که ابتدا فونت عادی Anjomanweb برای بدنه کل صفحه تعیین شده است سپس در ادامه اگر مروگر فیچر کوئری @supports را پشتیبانی کند فونت وریبل انجمن Anjomanweb VF جایگزین دستور قبلی می‌شود و از فونت عادی Anjomanweb صرف نظر می‌شود.

کار ایجاد فونت پشتیبان برای مرورگرهای قدیمی تمام شد. حالا در ادامه ببینید چگونه می‌توان از متغییرهای مختلف وریبل فونت انجمن برای طراحی یک صفحه استفاده کرد.

متغیر Weight

این متغییر وزن (ضخامت) نوشته را تعیین می‌کند که حداقل آن "wght" 100 و حداکثر آن "wght" 900 است.

.vf-wght {
    font-variation-settings: "wght" 100
}

متغیر Slant

این متغییر نوشته‌ها را تا ۸ درجه ایتالیک می‌کند (یعنی به سمت راست کج می‌کند) بنابراین حداقل آن "slnt" 0 و حداکثر آن "slnt" 8 است.

.vf-slnt {
    font-variation-settings: "slnt" 8
}

متغیر Width

این متغییر می‌تواند تا حدود ۲۵ درصد حروف را فشرده کند حداقل این متغییر "wdth" 75 و حداکثر آن "wdth" 100 است.

.vf-wdth {
    font-variation-settings: "wdth" 75
}

متغییرها را با هم ترکیب کنید.

متغیرهای فونت انجمن می‌توانند با یکدیگر ترکیب شوند و تاثیر چند بعدی داشته باشند.

در مثال زیر از تمام متغیرها استفاده شده است تا شکل دلخواه متن بدست بیاید.

.vf-full {
    font-variation-settings: "wght" 900, "wdth" 75, "slnt" 8
}

استایل‌ها را اولویت بندی کنید

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

font-weight: 300

و مثلا برای لود وزن بولد: font-weight: bold

یا برای لود فونت ایتالیک: font-style: italic

معادل این ۳ استایل در وریبل فونت انجمن به این ترتیب است:

معادل وزن لایت: font-variation-settings: "wght" 300

معادل وزن بولد: font-variation-settings: "wght" 700

برای حالت ایتالیک : font-variation-settings: "slnt" 8

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

مثال:

font-weight: bold;
font-variation-settings: "wght" 700

در این حالت اگر مرورگرقدیمی باشد و فونت استاتیک لود شده باشد خط دوم خوانده نخواهد شد و همان خط اول اجرا خواهد شد و اگر مرورگر جدید باشد خط دوم اولویت دارد و وریبل فونت با وزن ۷۰۰ (معادل بولد) ظاهر خواهد شد.