رول font-face@ در CSS

@font-face at-rule

font-face@ در CSS نوع فونت را مشخص می کند. این فونت یا از سمت سرور دریافت می‌شود و یا از فونت هایی که روی کامپیوتر کاربر نصب شده است٬ فراخوانی می شود.

نحوه نوشتار

@font-face {
  font-family: "iransans";
  src: url("/fonts/iransans.woff2") format("woff2"),
       url("/fonts/iransans.woff") format("woff");
}

مقادیر

font-family​

نام فونت را مشخص می کند که از آن برای تعریف فونت در قسمتهای مختلف استفاده می شود.

src​

آدرسی که باید از آنجا فونت دانلود شود ویا آدرس فونت نصب شده در کامپیوتر میزبان را مشخص کند.

font-style​

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

• ​normal
• italic
• oblique

font-weight​

میزان ضخامت فونت را مشخص می کند. مقادیر:

• ​normal
• ​bold
• ​100
• ​200​
• ​300
• ​400
• ​500
• ​600
• ​700
• ​800
• ​900

font-face@ در اکثر مواقع در بالای کدهای CSS نوشته می شود، اما میتوان از آن جاهای مختلف از کدهای CSS استفاده کرد.

در مثال زیر نحوه عملکرد این at-rule را میبینیم:

@font-face {
  font-family: 'IranSans';
  font-style: normal;
  font-weight: 400;
  src: local('IranSans'), url(https://opentag.ir/iransans.woff) format('woff');
}

پشتیبانی مرورگرها
تمام مرورگرها از این at-rule پشتیبانی می کنند.