فونت‌های متغیر (Variable Fonts) در وب با استفاده از CSS

تغییرات فونت (Font Variations) مجموعه‌ای از قابلیت‌های جدید هستند که به‌عنوان بخشی از استاندارد OpenType معرفی شده‌اند. این قابلیت به فایل‌های فونت اجازه می‌دهد چندین نسخه و حالت مختلف از یک فونت را درون یک فایل واحد ذخیره کنند که به آن فونت متغیر (Variable Font) گفته می‌شود. در نتیجه می‌توان تنها با یک فایل فونت، سبک‌های مختلفی از همان فونت را در وب استفاده کرد.

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

در ادامه چند نمونه از فونت‌های متغیر را بررسی می‌کنیم و سپس نحوه استفاده از آن‌ها در وب را توضیح خواهیم داد.

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

توجه: برای مشاهده صحیح مثال‌های زیر باید از مرورگری استفاده کنید که از Variable Fonts پشتیبانی کند.

Source Sans Variable

فونت Source Sans یکی از فونت‌های رایگان و محبوب است که نسخه متغیر آن نیز منتشر شده است. در این مثال، با قرار دادن ماوس روی متن می‌توان مشاهده کرد که مقدار font-weight به‌صورت نرم تغییر می‌کند.

این رفتار با CSS زیر پیاده‌سازی شده است:

@font-face {
  font-family: 'Source Sans';
  src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");
  font-weight: 1 999;
}

.source-sans,
.source-sans2,
.source-sans3 {
  font-family: 'Source Sans';
  transition: font-weight .45s ease-out;
}

.source-sans:hover,
.source-sans2:hover {
  font-weight: 999;
}

.source-sans3:hover {
  font-weight: 200;
}

استایل‌های سفارشی فونت

در مثال زیر از فونت Decovar استفاده شده است. این فونت یک Variable Font است که محورهای سفارشی (Custom Axes) متعددی دارد و امکان ایجاد سبک‌های منحصربه‌فرد و خلاقانه را فراهم می‌کند.

CSS استفاده‌شده برای این مثال:

@font-face {
  font-family: Decovar;
  src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");
}

.decovar,
.decovar2,
.decovar3 {
  font-family: Decovar;
}

.decovar {
  color: var(--green3);
  font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;
}

.decovar2 {
  color: hotpink;
  font-variation-settings: "WMX2" 580.838, "TRMB" 1000;
}

.decovar3 {
  color: rebeccapurple;
  font-variation-settings: "TRMF" 159.18, "TRME" 1000;
}

اکنون که چند نمونه واقعی را مشاهده کردیم، بهتر است با مفاهیم اصلی Variable Fonts آشنا شویم.

محورهای فونت (Font Axes)

فونت‌های متغیر تغییرات خود را از طریق محورهایی به نام Axes تعریف می‌کنند. پنج محور استاندارد وجود دارد:

ital

کنترل‌کننده حالت ایتالیک فونت است.

مقدار آن از طریق ویژگی زیر تنظیم می‌شود:

font-style

opsz

اندازه اپتیکال فونت را کنترل می‌کند.

font-optical-sizing

slnt

میزان شیب فونت را تعیین می‌کند.

font-style

wght

وزن فونت را کنترل می‌کند.

font-weight

wdth

عرض فونت را کنترل می‌کند.

font-stretch

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

فونت Decovar که در مثال قبل دیدیم، نمونه خوبی از فونتی است که تعداد زیادی محور سفارشی دارد.

استفاده از font-variation-settings

برای کنترل محورهای سفارشی و همچنین محورهایی که ویژگی CSS اختصاصی ندارند، از ویژگی font-variation-settings استفاده می‌شود.

مثال:

h1 {
  font-variation-settings:
    "BASE" 500,
    "SPAC" 200,
    "wght" 322,
    "HEIG" 456;
}

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

h1 {
  font-weight: 322;

  font-variation-settings:
    "BASE" 500,
    "SPAC" 200,
    "HEIG" 456;
}

بهتر است برای محورهایی که ویژگی CSS مخصوص خود را دارند، از همان ویژگی استاندارد استفاده شود.

نکته مهم

تمام فونت‌های متغیر لزوماً از هر ۵ محور استاندارد پشتیبانی نمی‌کنند. برای اطلاع از محورهای قابل استفاده، باید مستندات فونت موردنظر را مطالعه کنید.

همچنین توجه داشته باشید که در Variable Fonts مقدار font-weight می‌تواند هر عددی بین 1 تا 999 باشد؛ برخلاف فونت‌های سنتی که معمولاً از مضرب‌های 100 استفاده می‌کنند.

استفاده از Variable Fonts با @font-face

برای استفاده از فونت‌های متغیر در وب باید آن‌ها را با @font-face تعریف کنید.

در مثال زیر دو نسخه از فونت Source Sans تعریف شده است؛ یکی معمولی و دیگری بولد. هر دو از یک فایل Variable Font استفاده می‌کنند و در صورت عدم پشتیبانی مرورگر، فایل‌های معمولی به‌عنوان جایگزین بارگذاری می‌شوند.

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSans.woff2') format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSansBold.woff2') format("woff2");
  font-weight: 900;
}

استفاده از فونت:

h1 {
  font-family: 'Source Sans';
  font-weight: 900;
}

h2 {
  font-family: 'Source Sans';
  font-weight: 400;
}

تعریف بازه وزن

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

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSans.woff2') format("woff2");
  font-weight: 1 999;
}

در این حالت می‌توان از هر مقدار بین 1 تا 999 برای font-weight استفاده کرد.

مرورگرهایی که از Variable Fonts پشتیبانی نمی‌کنند، مقدار normal را اعمال خواهند کرد.

فونت‌های متغیر موجود

بیشتر فونت‌های متغیر موجود را می‌توانید در سایت V-Fonts.com پیدا کرده و آزمایش کنید.

چند فونت متن‌باز محبوب:

• Barlow
• Mutador Sans
• Source Sans
• Amstelvar
• Cabin VF

برخی از آن‌ها از طریق Google Fonts نیز در دسترس هستند.

تبدیل TTF به WOFF2

بسیاری از فونت‌ها در قالب TrueType (.ttf) ارائه می‌شوند، اما برای استفاده در وب بهتر است آن‌ها را به فرمت WOFF2 تبدیل کنید تا حجم فایل کاهش پیدا کند.

برای این کار می‌توانید از ابزار FontTools استفاده کنید.

پشتیبانی مرورگرها

پشتیبانی مرورگرها از Variable Fonts در حال حاضر بسیار خوب است و در بیشتر پروژه‌ها می‌توان از آن‌ها استفاده کرد.

با این حال هنوز برخی جزئیات مربوط به استاندارد CSS Fonts Module Level 4 در حال تکمیل شدن هستند و ممکن است در برخی مرورگرها تفاوت‌های جزئی وجود داشته باشد.

منابع و ابزارهای مفید

برای مطالعه بیشتر:

• Get Started with Variable Fonts — Richard Rutter
• Introduction to Variable Fonts on the Web
• One File, Many Options: Using Variable Fonts on the Web

ابزارهای کاربردی:

• Axis-Praxis
• V-Fonts.com

از همراهی شما با پارمین کلود متشکریم.