درباره Variable Font

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

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

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

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

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

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

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

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

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

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

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

1. IRANYekanXVF.woff وریبل فونت ایران‌یکان

2. IRANYekanX-regular.woff وب فونت ایران یکان وزن عادی

3. IRANYekanX-bold.woff وب فونت ایران یکان وزن بولد

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

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

}

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

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

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

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

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

body {
font-family: 'IRANYekanXVF', IRANYekanX, tahoma;
}

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

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

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

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

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

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

متغیر Weight

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

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

متغیر Dots

این متغییر نازکی‌ها را نازکتر و دندانه‌ها را تیز می‌کند. حداقل این متغیر "dots" 0 و حداکثر آن "dots" 4 است.

.vf-shar {
    font-variation-settings: "wght" 800, "dots" 4
}

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

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

font-weight: 300

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

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

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

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

مثال:

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

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

هم عرض(monospace) کردن اعداد

Stylistic alternates (ss03)

با فعال کردن استایلستیک سری ss03 اعداد بصورت منو اسپیس تایپ می‌شود یعنی عرض همه اعداد برابر است و مناسب استفاده در لیست‌ها و جداول اطلاعات.

.ss03 {
    -moz-font-feature-settings: "ss03";
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";
}