@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
پشتیبانی می کنند.