درباره Variable Font

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

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

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

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

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

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

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

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

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

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

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

1. danawebSP.woff وریبل فونت دانا

2. dana-regular.woff وب فونت دانا وزن عادی

3. dana-bold.woff وب فونت دانا وزن بولد

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

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

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

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

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

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

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

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

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

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

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

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

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

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

متغیر Weight

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

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

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

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

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

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