فونت متغیر یا variable fonts یک فناوری فونت پیشرفته هستند که به فایل فونت اجازه می دهد چندین سبک و تنوع داشته باشد؛ مانند وزن و عرض های مختلف. برخلاف فونتهای ثابت، که برای هر سبک به فایلهای جداگانه نیاز دارید (به عنوان مثال، توپر یا Bold، مورب یا Italic و عرض های مختلف). فونت متغیر میتواند این ویژگیها را به صورت پویا تنها در یک فایل تنظیم کند. قابلیت فونت متغیر در المنتور از نسخه 3.24 به بعد به المنتور اضافه شده است که در ادامه آموزش استفاده از این قابلیت را داریم حتما تا انتها این معرفی و آموزش را ببنید .
مزایای فونت متغیر نسبت به فونت استاتیک
- کنترل بهتر: با فونت های استاتیک، شما به ویژگی های از پیش تعیین شده محدود می شوید. به عنوان مثال، مجبور هستید وزن مشخصی مثل دقیقا 200 یا دقیقا 300 را انتخاب کنید. با فونت های متغیر، کنترل بیشتری دارید و به شما امکان می دهد وزن 475 را انتخاب کنید، اگر برای طراحی شما بهترین است.
- عملکرد: با استفاده از یک فایل فونت که شامل همه تغییرات است، فونت های متغیر می توانند تعداد درخواست های HTTP و اندازه کلی فایل مورد نیاز برای بارگیری سبک های مختلف فونت را کاهش دهند و عملکرد وب سایت را بهبود بخشند.
- تایپوگرافی ریسپانسیو: فونت های متغیر امکان تنظیمات پویا را در تایپوگرافی بر اساس اندازه صفحه نمایش، وضوح یا ترجیحات کاربر فراهم می کنند. برای مثال، یک فونت متغیرمیتواند در صفحههای کوچکتر فشردهتر شود تا فضا را ذخیره کند یا کنتراست را در اندازههای کوچکتر برای خوانایی بهتر افزایش دهد.
- یکپارچه سازی با CSS: فونت های متغیر را می توان با استفاده از CSS کنترل کرد. ویژگیهایی مانند font-weight، font-stretch و font-style را میتوان با مقادیری فراتر از مجموعه ثابت معمول و با کمک cssتنظیم کرد و کنترل دقیقتری را ارائه کرد. به این معنی که می توانید انیمیشن ها را به فونت های متغیر اضافه کنید.
نحوه اضافه کردن Variable fonts یا فونت متغیر در المنتور
نکته: variable fonts دارای چندین متغیر هستند که می توانید برای سفارشی سازی از آنها استفاده کنید. عرض (width) و وزن (weight) دو مورد پرکاربرد هستند و این دو در المنتور پشتیبانی می شوند.
اضافه کردن فونت متغیر به المنتور رو طبق آموزش زیر انجام دهید:
در قدم اول باید فونت متغیر مورد نظر خود را تهیه و دانلود کنید. باید درنظر داشته باشید که همه فونت ها قابلیت استفاده به عنوان فونت متغیر را ندارند بنابراین در هنگام تهیه فونت باید حتما این مسئله را بررسی کنید.
اگر برای دانلود فونت های انگلیسی از سایت google fonts استفاده می کنید؛ می توانید حداقل و حداکثر وزن و عرض فونت ها را با کلیک بر روی Type Tester بررسی کنید.
به پیشخوان وردپرس و منوی المنتور بروید و زیرمنوی فونت های سفارشی را برای ایجاد فونت متغیر باز کنید. بعد از زدن دکمه اضافه کردن فونت وارد پنجره زیر می شوید.
در پنجره بالا روی دکمه add variable font کلیک کنید تا کادرهای افزودن فایل فونت منتغیر و تنظیمات مربوط به متغیرهای وزن و عرض باز شود.
یک نام به فونت متغییر خود اختصاص دهید؛ فایل با پسوند TTF مربوط به فونت متغیر را آپلود کرده و حداقل و حداکثر متغیرهای عرض و وزن را برای فونت خود تعیین کنید. بعد از انجام این تنظیمات با زدن دکمه انتشار فونت متغیر در بخش فونت های سفارشی المنتور ذخیره می شود.
نکته: برای اینکه فونت به درستی عمل کند، باید حداقل و حداکثر وزن و یا عرض را تنظیم کنید. همه فونت ها شامل متغیر عرض و وزن نیستند. در این مواقع کافیست فقط متغیر مربوطه را بررسی کنید. میزان حداقل و حداکثر متغیرها توسط سازنده فونت تعیین می شوند.
استفاده از فونت های متغیر در ویرایشگر المنتور
پیش از این گفتیم که چطور یک فونت متغیر را به المنتور اضافه کنیم اما بعد از این کار چطور باید در پروژه های خود از این فونت استفاده کرد؟
اکثر ویجت های المنتوری در تب استایل بخشی به نام تایپوگرافی دارند. فونت متغیر شما به لیست خانواده فونت ها اضافه می شود.
بعد از انتخاب فونت متغیر در زیرگروه variable fonts امکان تعیین میزان وزن و عرض فونت با دکمه های لغزان فراهم می شود و میتوانید متغیرهای مذکور را در بازه مشخص تنظیم کنید.
جمع بندی
اگر همیشه از فونت های ثابت یا static در المنتور استفاده کرده باشید که آموزش نصب فونت در المنتور کامل آموزش داده شده است ناچارید برای هر وزن از یک فونت، فایل های مجزایی آپلود کنید. اما اگر یک فونت را به صورت متغیر تعریف کنید دیگر نیازی به این کار نیست. تنها با آپلود یک فایل برای فونت و تنظیم بازه وزن فونت این کار انجام می شود. نکته خیلی مهم در استفاده از variable fonts این است که همه فونت ها امکان استفاده به صورت متغیر را ندارند و باید هنگام تهیه فونت به این مسئله توجه کنید.