این روزها استفاده از فونت‌های سفارشی در طراحی وب به یکی از ملزومات تجربه کاربری و طراحی زیبا بدل شده است. کاربرانی که به زبان‌های مختلف می‌نویسند، به خصوص فارسی‌زبانان، نیاز دارند تا فونت‌هایی را به پروژه‌های وب خود اضافه کنند که متونشان را دقیق، زیبا و بهینه نمایش دهد. یکی از راه‌هایی که می‌توانید این کار را انجام دهید استفاده از خاصیت @font-face در CSS است.
توسط @font-face شما می‌توانید فونت‌های سفارشی را به صفحات وب خود بیاورید و از آنها به راحتی استفاده کنید. این ویژگی اجازه می‌دهد تا فونت‌ها از منابع خارجی بارگذاری شوند و شما نیازی نیست که فونتی را که نیاز دارید، فقط روی سیستم خودتان داشته باشید.
یکی از چالش‌هایی که ممکن است با آن برخورد کنید، گپ‌ها و فضای بی‌مورد بین خطوط متن است که می‌تواند به صورت ناخواسته در نمایش فونت‌های سفارشی ایجاد شود. این زمانی مهم می‌شود که طراحی خاصی دارید که نیاز به تنظیم دقیق فاصله خطوط دارد.
این جایی است که ویژگی line-gap-override به کمک می‌آید. این ویژگی هنوز در مراحل اولیه پشتیبانی مرورگرها هستند ولی به شما اجازه می‌دهد تا فضای بین خطوط را به دلخواه خود تنظیم کنید و از پیش‌فرض‌های فونت سفارشی خلاص شوید.
مثال کد
@font-face {
font-family: "MyCustomFont";
src: url("mycustomfont.woff2") format("woff2");
line-gap-override: normal;
}
body {
font-family: "MyCustomFont", sans-serif;
}
توضیح خط به خط کد
@font-face: در اینجا، ما فونت سفارشی خود را به صفحه وارد کرده‌ایم.
font-family: با استفاده از این خصوصیت نامی به فونت خود می‌دهیم تا بعداً بتوانیم آن را استفاده کنیم.
src: آدرس و فرمت فایل فونت را در اینجا مشخص کرده‌ایم.
line-gap-override: این ویژگی جدید به ما اجازه می‌دهد که فاصله خطوط را کنترل کنیم.
body: تنظیم فونت پیش‌فرض برای محتوای بدنه صفحه را انجام می‌دهد.