فونت‌های متغیر یکی از امکانات جدید CSS هستند که به طراحان این امکان را می‌دهند تا یک فایل فونت منعطف داشته باشند که می‌تواند تغییرات مختلفی مانند وزن، سبک و ظاهر دیگر را پشتیبانی کند. با استفاده از فونت‌های متغیر، می‌توانید چندین سبک مختلف را با بهره‌گیری از یک فایل فونت خلق کنید که این امر به بارگذاری سریع‌تر صفحات و بهینه‌سازی بهتر وب‌سایت کمک می‌کند.
فونت‌های متغیر نه تنها کار را برای طراحان ساده‌تر کرده‌اند، بلکه انعطاف‌پذیری بیشتری نیز ارائه می‌دهند. تصور کنید می‌توانید تنها با استفاده از یک فایل، یک فونت را از حالت نازک به بولد تغییر دهید و یا حتی تمام استایل‌های میانی آن را پوشش دهید. این همه انعطاف، بدون نیاز به بارگیری چندین فایل مختلف، به راحتی در اختیار شماست.
برای استفاده از فونت‌های متغیر در CSS، نیاز دارید تا از ویژگی‌های CSS مانند font-variation-settings و @font-face استفاده کنید. این‌ها به شما اجازه می‌دهد تا فونت خود را با مقداری تغییرات مختصر به کار ببرید و از همه ظرفیت‌های آن بهره‌مند شوید.
برای استفاده از فونت‌های متغیر، ابتدا باید فونت متغیر خود را به وب‌سایت اضافه کنید. این کار ساده است و تنها به مقداری کدنویسی CSS نیاز دارد. حالا اجازه دهید نگاهی به مثال بیندازیم:
@font-face {
font-family: 'MyVariableFont';
src: url('MyVariableFont.woff2') format('woff2');
}
.text {
font-family: 'MyVariableFont';
font-variation-settings: 'wght' 400;
}
توضیح کد
@font-face: این دستور برای معرفی یک فونت جدید به مرورگر استفاده می‌شود که به صورت متغیر ارائه شده است.font-family: نامی که برای فونت متغیر انتخاب شده تا در CSS بتوان از آن استفاده کرد.src: محل فایل فونت که به صورت URL مشخص می‌شود تا مرورگر آن را بارگذاری کند..text: کلاس CSS که برای عناصر HTML استفاده می‌شود و فونت جدید را به آنها تخصیص می‌دهد.font-variation-settings: 'wght' 400: این گزینه مشخص می‌کند که فونت با چه وزن ظاهری نمایش داده شود.