فونت Variable چیست؟ مزایا و روش استفاده از فونت متغیر

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

توی این مقاله اول خیلی ساده می‌بینیم فونت متغیر چطور کار می‌کنه. بعد سراغ تفاوتش با فونت معمولی، روش تعریف اون در CSS، سازگاری مرورگرها و وضعیت فونت‌های فارسی می‌ریم. اگه تا حالا با فونت سایت کار نکردید هم نگران نباشید؛ همه‌چیز رو قدم‌به‌قدم جلو می‌بریم.

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

فونت Variable چیست؟

فونت Variable یا فونت متغیر نوعی فونت OpenType هست که چند حالت طراحی رو داخل یک فایل نگه می‌داره. این فناوری در سپتامبر ۲۰۱۶ همراه با OpenType 1.8 معرفی شد و حالا مرورگرهای مدرن از قابلیت‌های اصلی اون پشتیبانی می‌کنن.

برای نمونه، یک فایل متغیر ممکنه وزن‌های ۱۰۰ تا ۹۰۰ رو پوشش بده. عدد ۱۰۰ معمولاً خیلی نازک و عدد ۹۰۰ خیلی ضخیمه. شما می‌تونید با ویژگی font-weight در CSS وزن مناسب هر بخش رو انتخاب کنید.

محورهای تغییر در فونت متغیر

هر ویژگی قابل‌تغییر در یک فونت متغیر «محور» نام داره. محور یعنی یک بخش از ظاهر فونت که می‌تونید مقدار اون رو عوض کنید. وزن حروف رایج‌ترین محوره، ولی بعضی فونت‌ها گزینه‌های بیشتری هم دارن.

• وزن یا wght: حروف رو نازک‌تر یا ضخیم‌تر می‌کنه.
• عرض یا wdth: پهنای حروف رو تغییر می‌ده.
• کجی یا slnt: زاویه حروف رو تنظیم می‌کنه.
• اندازه اپتیکی یا opsz: جزئیات حروف رو برای اندازه‌های مختلف خواناتر می‌کنه.

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

تفاوت فونت متغیر با فونت معمولی

در فونت‌های معمولی یا ثابت، هر وزن اغلب فایل جداگانه خودش رو داره. برای نمونه، وزن معمولی، نیمه‌ضخیم و ضخیم ممکنه با سه فایل جدا روی سایت قرار بگیرن. مرورگر هم فایل مربوط به وزن موردنیاز رو دانلود می‌کنه.

در فونت متغیر، یک فایل می‌تونه بازه‌ای از وزن‌ها رو نگه داره. به همین خاطر فقط به گزینه‌هایی مثل ۴۰۰ یا ۷۰۰ محدود نیستید و اگه فونت پشتیبانی کنه، می‌تونید مقداری مثل ۵۵۰ رو هم انتخاب کنید.

آیا فونت متغیر حجم سایت رو کمتر می‌کنه؟

جواب کوتاه اینه: بستگی داره. فایل متغیر معمولاً از یک وزن ثابت بزرگ‌تره، چون اطلاعات حالت‌های بیشتری رو داخل خودش نگه می‌داره. ولی وقتی سایتتون به چند وزن نیاز داره، همون فایل ممکنه از مجموع چند فایل ثابت کوچک‌تر باشه.

پس نمی‌شه برای هر وزن عدد ثابتی مثل ۱۰۰ کیلوبایت در نظر گرفت یا گفت فونت متغیر همیشه سایت رو سریع‌تر می‌کنه. فرمت فایل، تعداد نویسه‌ها، تعداد محورها و زیرمجموعه‌سازی روی حجم نهایی اثر می‌ذارن. زیرمجموعه‌سازی یعنی فقط نویسه‌هایی داخل فایل بمونن که واقعاً بهشون نیاز دارید.

اگه سایتتون فقط از یک وزن استفاده می‌کنه، یک فایل ثابت و بهینه ممکنه انتخاب سبک‌تری باشه. اگه چند وزن مختلف دارید، مقایسه حجم فایل متغیر با مجموع فایل‌های ثابت تصمیم دقیق‌تری بهتون می‌ده. برای اینکه اهمیت این موضوع رو بهتر بسنجید، می‌تونید مقاله تأثیر سرعت سایت در سئو رو هم بخونید.

روش استفاده از فونت Variable در CSS

اول فایل فونت رو با فرمت مناسب وب، معمولاً WOFF2، داخل پوشه فونت سایتتون قرار بدید. بعد با قانون @font-face اون رو به مرورگر معرفی کنید. اگه ساختار فایل CSS براتون ناآشناست، اول آموزش ساختار اصلی فایل CSS رو ببینید.

@font-face {  font-family: "MyVariableFont";  src: url("fonts/my-variable-font.woff2") format("woff2");  font-weight: 100 900;  font-style: normal;  font-display: swap;}

عبارت font-weight: 100 900 به مرورگر می‌گه این فایل بازه وزن ۱۰۰ تا ۹۰۰ رو پوشش می‌ده. این بازه باید با مشخصات واقعی فونتتون هماهنگ باشه. اگه فونت فقط وزن‌های ۳۰۰ تا ۷۰۰ رو پشتیبانی می‌کنه، همون بازه رو بنویسید.

حالا می‌تونید فونت و وزن موردنظرتون رو روی بخش‌های مختلف صفحه بذارید:

body {  font-family: "MyVariableFont", sans-serif;  font-weight: 400;}h1 {  font-weight: 750;}

برای محورهای استاندارد بهتره اول از ویژگی‌هایی مثل font-weight استفاده کنید. اگه این ویژگی‌ها براتون تازه هستن، آموزش ویژگی‌های پرکاربرد CSS کمکتون می‌کنه با کاربرد اون‌ها آشنا بشید. ویژگی font-variation-settings کنترل مستقیم‌تری بهتون می‌ده، ولی برای شروع همیشه لازم نیست. راهنمای فونت‌های متغیر در MDN جزئیات بیشتری درباره محورها و روش کنترل اون‌ها داره.

سازگاری فونت متغیر با مرورگرها

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

در ویژگی font-family یک فونت جایگزین مثل sans-serif هم بذارید. این گزینه باعث می‌شه اگه فایل اصلی دانلود نشد یا مرورگر نتونست اون رو نمایش بده، متن همچنان خوانا بمونه. مقدار font-display: swap هم کمک می‌کنه متن تا زمان آماده‌شدن فونت اصلی مخفی نمونه.

فونت‌های متغیر فارسی

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

ایران‌سنس ایکس هم نسخه متغیر داره و دیگه لازم نیست منتظر انتشار نسخه متغیر این خانواده فونت بمونیم. ادعای «اولین فونت متغیر ایرانی» درباره دانا بدون منبع رسمی و قابل‌بررسی قطعی نیست؛ برای همین بهتره دانا رو یکی از نمونه‌های اولیه و مهم این حوزه بدونیم، نه حتماً اولین نمونه.

مزایا و محدودیت‌های فونت Variable

• فایل‌های کمتر: یک فایل ممکنه جای چند وزن ثابت رو بگیره.
• کنترل دقیق‌تر: می‌تونید بین وزن‌های ازپیش‌تعیین‌شده هم مقدار دلخواه انتخاب کنید.
• طراحی منعطف‌تر: بعضی فونت‌ها علاوه بر وزن، عرض، کجی یا اندازه اپتیکی رو هم کنترل می‌کنن.
• حجم احتمالی بیشتر: اگه فقط یک وزن لازم دارید، فایل متغیر ممکنه از فایل ثابت بزرگ‌تر باشه.
• نیاز به آزمایش: ظاهر فونت، محدوده محورها و نتیجه نهایی باید روی مرورگرها و اندازه‌های مختلف بررسی بشه.

فونت متغیر ابزار جذابی برای طراحی وب هست، ولی بهتره فقط به‌خاطر جدیدتر یا حرفه‌ای‌تر به نظر رسیدن سراغش نرید. اول وزن‌ها و حالت‌های موردنیاز سایتتون رو مشخص کنید. بعد حجم نسخه متغیر رو با فایل‌های ثابت مقایسه کنید و در پایان، سرعت و خوانایی صفحه رو روی موبایل و کامپیوتر بسنجید.

جمع‌بندی

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

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

سوالات متداول درباره فونت Variable

تیم تولید محتوا

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