استفاده از فونت‌های وب زیبا و خلاقانه یکی از اصول طراحی وب مدرن است. اغلب اوقات نیاز داریم تا ویژگی‌های خاص فونت‌ها را برای تطبیق با طرح گرافیکی سایتی که در حال ساخت آن هستیم، سفارشی کنیم. در این مسیر، @font-feature-values در CSS به کمک‌مان می‌آید. حالا بیایید نگاهی بیندازیم به این که چطور می‌توان از این قابلیت به صورت موثر بهره برد.
@font-feature-values یک ماژول CSS است که به ما اجازه می‌دهد ویژگی‌های پیچیده فونت‌ها را کنترل کرده و آن‌ها را برای استفاده در قسمت‌های مختلف سایت تعریف کنیم. برای کسانی که دنبال انعطاف‌پذیری بیشتر در نمایش فونت‌ها هستند، این ویژگی بسیار جذاب است. ما می‌توانیم کنترل خوبی روی ظاهر و حس حروف‌های خاص، اعداد و دیگر جزئیات داشته باشیم.
بیایید بررسی کنیم چطور می‌توانیم از این ویژگی برای نمایش شفاف‌تر و جذاب‌تر فونت‌ها استفاده کنیم. فرض کنید می‌خواهیم خصوصیات مختلفی همچون font-display را مدیریت کنیم. این یکی از ویژگی‌های مهم است که اجازه می‌دهد ترتیبی برای نمایش متون در زمانی که فونت دلخواه هنوز لود نشده است، تعیین شود.
ویژگی font-display به ما امکان می‌دهد تا به بهترین شکل نحوه بارگذاری و نمایش فونت را تنظیم کنیم، چیزی که می‌تواند تاثیر زیادی بر تجربه کاربر داشته باشد. با استفاده از این ویژگی، می‌توانیم گزینه‌های مختلفی مثل swap, block, fallback و optional را تنظیم کنیم که هرکدام استراتژی خاص خود را برای نمایش و بارگذاری فونت دارند.
خب، حالا که توضیحات کلی از این ویژگی داریم، بریم سراغ یک مثال ملموس تا بهتر متوجه شیوه استفاده از آن بشیم. کد زیر را ببینید:
@font-face {
font-family: 'MyCustomFont';
src: url('MyCustomFont.woff2') format('woff2');
font-display: swap;
}
خط اول: از @font-face برای تعریف یک خانواده فونت جدید استفاده می‌کنیم.
خط دوم: با استفاده از font-family، نام این خانواده فونت را تعیین کرده‌ایم.
خط سوم: در اینجا منبع فونت با فرمت woff2 تعریف شده است.
خط چهارم: ویژگی font-display به مقدار swap تنظیم شده است که در این حالت متون اولیه با یک فونت جایگزین نمایش داده می‌شود تا وقتی که فونت اصلی لود شود.