فونت وریبل چیست؟ راهنمای نصب فونت Variable در سایت

فونت وریبل (Variable Font) که در ایران با نام فونت متغیر نیز شناخته می‌شود، یکی از نوآوری‌هایی است که در زمینه استفاده از فونت در فضای تایپ‌فیس و طراحی حروف رخ داده و با معرفی نسخه اپن‌تایپ ۱.۸ این تغییر و تحول را ایجاد کرد. با نصب فونت وریبل در سایت و همچنین سیستم‌عامل، می‌توانید در بهینه‌ترین حالت ممکن از فونت‌های مختلف استفاده کنید.

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

فونت وریبل چیست؟

وریبل (Variable) به فارسی به معنی «متغیر» است. بدین ترتیب Variable Font به معنی «فونت متغیر» است که در اینجا اشاره خاصی به یک ساختار جدید از فایل‌های فونت دارد.

در سال ۲۰۱۶ بود که چند کمپانی بزرگ همچون اپل، مایکروسافت، ادوبی و گوگل با همکاری یکدیگر نسخه جدیدی از Open Type را ارائه کردند که انقلابی را در ساختار فونت ایجاد کرد و آن هم چیزی نبود جز پشتیبانی از فونت متغیر!

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

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

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

مزایای فونت متغیر (Variable)

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

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

پس هنگامی که در نرم‌افزار ورد یا فتوشاپ قرار است از یک فونت Variable استفاده کنید، دیگر مجبور به جستجو در بین صدها فونت برای یافتن وزن مورد نظر نیستید. کافی است خانواده فونت را انتخاب کنید تا با استفاده از تنظیمات Open Type یا سایر تنظیماتی که هر برنامه در اختیار قرار می‌دهد، وزن دلخواهتان را هم انتخاب کنید.

درست مانند تصویر بالا که من فونت وریبل ساحل را انتخاب کرده‌ام. همانطور که می‌بینید با نصب نسخه وریبل، می‌توان به تمامی وزن‌های آن از طریق گزینه Set Font Style دسترسی داشت.

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

جدا از این هر یک از این فایل فونت‌ها معمولا دارای حجمی بین ۷۰ تا ۱۰۰ کیلوبایت هستند که برای ۴ وزن مختلف، مجموعا ۴۰۰ کیلوبایت از حجم صفحه اشغال می‌شود. همچنین ۴ درخواست HTTP نیز باعث صرف زمان بیشتر برای لود کامل صفحه می‌گردد. آمار جالب شد؛ نه؟

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

در تصویر بالا پوشه مربوط به فونت ایران سنس با فرمت WOFF2 را مشاهده می‌کنید که مربوط به ورژن ۸ بوده و تمامی ۱۱ وزن این فونت شامل ۳۴۶ کیلو بایت است. در حالی که نسخه وریبل این فونت با همان فرمت و وزن، همراه با متغیرهای نقطه و گلیف‌های خاص، تنها ۹۹.۸ کیلو بایت حجم دارد.

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

---

آموزش نصب فونت وریبل در سایت

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

از آنجایی که ممکن است مرورگر همه کاربران به دلیل قدیمی بودن یا هر مسئله دیگری فونت وریبل را بارگزاری نکند، بهتر است که علاوه بر نصب فونت وریبل، از نصب عادی که در آموزش نصب فونت در سایت توضیح داده شد استفاده کنید.

توجه: زمانی که از فونت وریبل در سایت استفاده کنید، اگر مرورگر کاربر از این نسخه پشتیبانی کند، فونت‌هایی که با وزن معمولی با با استفاده از دستور @font-face نصب شده باشند لود نخواهند شد. اما اگر پشتیبانی نکند از این حالت استفاده می‌شود. پس استفاده همزمان از فونت معمولی و وریبل، مشکلی از نظر بهینه بودن سایت ایجاد نمی‌کند.

ابتدا نسخه عادی فونت را به تعداد وزن مورد نیاز، با قرار دادن کدهای زیر در فایل style.css خود فراخوانی کنید.

@font-face {
    font-family: FONT-NAME;
    src: url('fonts/FONTFILE-REGULAR.woff2') format('woff2');
}
@font-face {
    font-family: FONT-NAME;
    src: url('fonts/FONTFILE-BOLD.woff2') format('woff2');
    font-weight: 700;
}

همانطور که در خط ۲ و ۶ مشاهده می‌کنید، به جای FONT-NAME باید نام فونت را وارد کنید. در خطوط ۳ و ۷ هم که آدرس فایل فونت‌ها داده شده است، به ترتیب به جای FONTFILE-REGULAR و FONTFILE-BOLD نام فایل فونت که شامل وزن معمولی و بولد است را وارد می‌کنید.

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

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

در کد بالا نیز به جای FONT-NAMEV (خط دوم) و FONT-VARIABLE-FILE (خط ۳ و ۵) نام فونت خود را وارد کنید. با این تفاوت که با افزودن یک کاراکتر «V» به انتهای نام فونت، مشخص کنید که این فونت متغیر است.

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

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

در خط اول تا سوم مشخص کرده‌ام که برای بدنه کلی سایت (تگ body) از فونت «iransansx» استفاده شود. همچنین با جدا کردن کاما تعیین شده که اگر فونت در دسترس نبود، به‌جای آن فونت تاهوما که پیش‌فرض مرورگر است استفاده شود.

اما در خط چهارم به بعد با استفاده از دستور supports تعیین شده که فونت بدنه کلی سایت (تگ body) به صورت متغیر لود شود که در اینجا نام فونت به صورت «iransansxv» وارد شده است. یعنی یک V به انتهای نام فونت افزوده شده که آن را از فونت معمولی متمایز کرده است.

حال به همین ترتیب سایر کلاس‌ها و بخش‌هایی که می‌خواهید فونت آنها روی حالت متغیر قرار داشته باشند در ادامه خط ۸ به بعد درست مانند تگ body وارد کنید.

به مثال زیر توجه کنید:

@supports(font-variation-settings:normal){
    .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .wp-block-quote quote-light {
        font-family: Sahel-VF, tahoma;
        font-weight: 900;
    }
    .entry-title, .comment-meta b, html body .button, html body [type="submit"] {
        font-family: Sahel-VF, tahoma;
        font-weight: 800;
    }
    .entry .wp-block-columns, .shortc-button {
    margin: 0 -10px;
    font-family: Sahel-VF, tahoma;
    font-weight: 600;
    }
}

همانطور که در نمونه بالا مشاهده می‌کنید، من ۳ وزن مختلف فونت را برای چند کلاس مختلف انتخاب کرده‌ام که شامل وزن ۹۰۰، ۸۰۰ و ۶۰۰ است.

نکته: برخی فونت‌ها همچون ایران سنس، ایران یکان، ابر، انجمن و… امکان تغییر وزن، سبک نقاط و کشیدگی را از طریق متغیرهای وریبل در اختیار قرار داده‌اند که شامل «WGHT, DOTS, KSHD» هستند. برای استفاده از این متغیرها می‌توانید به کمک فایل راهنمای PDF. درون بسته دانلود فونت عمل کنید که امکان استفاده از متغیرها با دستور font-variation-settings فراهم است.

به عنوان مثال در نمونه زیر در فونت ایران سنس که از متغیرهای تغییر وزن و نقطه پشتیبانی می‌کند، تعیین شده که برای تگ H2 که درون کلاس entry-content قرار دارد، وزن فونت روی ۹۰۰ و از سبک نقطه گذاری شماره ۴ استفاده گردد.

.entry-content h2 {
    font-variation-settings: "wght" 900, "DOTS" 4;
}

لیست فونت های فارسی دارای نسخه وریبل

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

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

---

جمع بندی نهایی

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

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

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