در وریبل فونت فرهنگ شما فقط یک فایل دارید که با کم و زیادکردن متغیرها میتوانید تعیین کنید وزن (ضخامت) فونت چقدر باشد علاوه بر وزن، ۴ متغیر دیگر نیز در فونت فرهنگ قابل تنظیم است که در ادامه با آنها آشنا خواهید شد.
وقتی یک فایل فونت با حجم پایینتر و قابلیت بیشتر در اختیار شماست مطمئناً استفاده از وریبل فونت بر فونتهای معمولی ارجحیت دارد اما یک مشکل وجود دارد.
مرورگرهای قدیمی از وریبل فونت پشتیبانی نمیکنند. مرورگرهایی که از وریبل فونت پشتیبانی میکنند:
گوگل کروم نسخه ۶۲ به بعد (تاریخ انتشار: مهرماه ۱۳۹۶)
اپرا نسخه ۴۹ به بعد (تاریخ انتشار: آذر ۱۳۹۶)
سافاری نسخه ۱۱ به بعد (تاریخ انتشار تیرماه ۱۳۹۷)
فایرفاکس نسخه ۶۲ به بعد (تاریخ انتشار: شهریورماه ۱۳۹۷)
مایکروسافت ادج نسخه ۱۷ به بعد (تاریخ انتشار : اردیبهشت ۱۳۹۷)
جای نگرانی نیست در ادامه این آموزش خواهید آموخت که چگونه فونت معمولی را پشتیبان وریبل فونت کنید تا اگر مرورگر قدیمی بود بجای وریبل فونت، فونت عادی لود شود و مشکلی ایجاد نشود.
ابتدا لازم است سه فایل فونت را بارگذاری کنیم:
1. FarhangVariable.woff وریبل فونت فرهنگ
2. Farhang-Regular.woff وب فونت فرهنگ وزن عادی
3. Farhang-Bold.woff وب فونت فرهنگ وزن بولد
بارگذاری وریبل فونت با استفاده از @font-face
بسیار ساده است، همانطور که در اینجا میتوانید ببینید فونت متغیر را با نام متفاوت از فونت عادی مشخص کردهایم و آن را 'farhang VF'
نامیدهایم. نحوه بارگیری آن به صورت زیر است:
@font-face {
font-family: 'farhang VF';
src: url('FarhangVariable.woff') format('woff-variations'),
/* will be the standard and works in Safari now */
url('FarhangVariable.woff') format('woff');
/* for the other supporting browsers */
font-display: fallback;
}
در حالت معمولی فونت فرهنگ را به صورت زیر بارگذاری می کنید و نام آن را farhang
می گذاریم.
@font-face {
font-family: farhang;
src: url('staticfonts/Farhang-Regular.woff') format('woff');
}
@font-face {
font-family: farhang;
src: url('staticfonts/Farhang-Bold.woff') format('woff');
font-weight: 700;
}
آیا مرورگرها هر سه فایل را بارگذاری میکنند؟ خیر . مرورگر فقط فونتی را بارگذاری میکند که نیاز داشته باشد. بنابراین اگر طبق این راهنما پیش بروید در مرورگرهای جدید فقط فایل وریبل فونت بارگذاری میشود و در مرورگرهای قدیمی فقط فونتهای عادی و از بقیه صرف نظر میشود.
اگر بخواهیم به روش معمول ۲ فونت را فالبک (پشتیبان یکدیگر) کنیم کدها به این شکل خواهد بود:
body {
font-family: 'farhang VF', farhang, tahoma;
}
ولی این روش در اینجا برای ما کار نمیکند. و لازم است به روشی که در ادامه خواهید دید فونت عادی را پشتیبان فونت وریبل کنید.
در کدهای زیر برای تشخیص مرورگر از فیچر کوئریهای @supports
استفاده میکنیم.
دقت کنید که تمام مرورگرهایی که از وریبل فونت پشتیبانی میکنند از فیچرکوئری @supports
هم پشتیبانی میکنند.
body {
font-family: farhang, tahoma;
}
@supports (font-variation-settings: normal) {
body {
font-family: 'farhang VF', tahoma;
}
}
کدهای بالا به این صورت عمل میکند که ابتدا فونت عادی farhang
برای بدنه کل صفحه تعیین شده است سپس در ادامه اگر مروگر فیچر کوئری @supports
را پشتیبانی کند فونت وریبل فرهنگ farhang VF
جایگزین دستور قبلی میشود و از فونت عادی farhang
صرف نظر میشود.
کار ایجاد فونت پشتیبان برای مرورگرهای قدیمی تمام شد. حالا در ادامه ببینید چگونه میتوان از متغییرهای مختلف وریبل فونت فرهنگ برای طراحی یک صفحه استفاده کرد.
این متغییر وزن (ضخامت) نوشته را تعیین میکند که حداقل آن "wght" 100
و حداکثر آن "wght" 900
است.
.vf-wght {
font-variation-settings: "wght" 400
}
حافظ زِ دیده دانهٔ اشکی هَمی فِشان
باشد که مُرغِ وَصل کند قصدِ دامِ ما
این متغییر نوشتهها را شارپ میکنه (یعنی دور منحنی های حروف رو میگیره و شکل حروف رو کمی هندسی و مسطح میکنه) بنابراین حداقل آن "SHAR" 0
و حداکثر آن "SHAR" 10
است.
.vf-SHAR {
font-variation-settings: "SHAR" 10
}
حافظ زِ دیده دانهٔ اشکی هَمی فِشان
باشد که مُرغِ وَصل کند قصدِ دامِ ما
این متغییر میتواند به بعضی حروف زائدههای تزیینی اضافه کند حداقل این متغییر "SERI" 0
و حداکثر آن "SERI" 10
است.
.vf-SERI {
font-variation-settings: "SERI" 10
}
حافظ زِ دیده دانهٔ اشکی هَمی فِشان
باشد که مُرغِ وَصل کند قصدِ دامِ ما
این متغیر در کلمات کشیدگی ایجاد میکند. "KASH" 0
حالت بدون کشیدگی و"KASH" 100
حداکثر کشیدگی است.
.vf-KASH {
font-variation-settings: "KASH" 17
}
حافظ زِ دیده دانهٔ اشکی هَمی فِشان
باشد که مُرغِ وَصل کند قصدِ دامِ ما
متغیرهای فونت فرهنگ میتوانند با یکدیگر ترکیب شوند و تاثیر چند بعدی داشته باشند.
در مثال زیر از تمام متغیرها استفاده شده است تا شکل دلخواه متن بدست بیاید.
.vf-full {
font-variation-settings: "wght" 400, "SHAR" 10, "SERI" 10, "KASH" 10
}
حافظ زِ دیده دانهٔ اشکی هَمی فِشان
باشد که مُرغِ وَصل کند قصدِ دامِ ما
در رابطه با فونتهای استاتیک شما برای لود وزن لایت از استایل زیر استفاده میکنید:
font-weight: 300
و مثلا برای لود وزن بولد: font-weight: bold
معادل این ۲ استایل در وریبل فونت فرهنگ به این ترتیب است:
معادل وزن لایت: font-variation-settings: "wght" 300
معادل وزن بولد: font-variation-settings: "wght" 700
بنابراین لازم است مطابق اولویت بندی در کدهای لود فونت، استایلها را هم به این ترتیب اولویت بندی کنید.
مثال:
font-weight: bold;
font-variation-settings: "wght" 700
در این حالت اگر مرورگرقدیمی باشد و فونت استاتیک لود شده باشد خط دوم خوانده نخواهد شد و همان خط اول اجرا خواهد شد و اگر مرورگر جدید باشد خط دوم اولویت دارد و وریبل فونت با وزن ۷۰۰ (معادل بولد) ظاهر خواهد شد.