دسته : آموزش رایگان CSS
@font-face یکی از قابلیتهای CSS است که به شما اجازه میدهد فونتهای سفارشی را به وبسایت خود اضافه کنید. با استفاده از این ویژگی، دیگر نیازی به استفاده از فونتهای پیشفرض مرورگرها ندارید و میتوانید فونتهای دلخواه و متنوعی را به طراحی خود اضافه کنید. در این مقاله، به نحوه استفاده از @font-face، ساختار آن و نکات مربوط به استفاده بهینه از فونتهای سفارشی میپردازیم.
@font-face به شما امکان میدهد که فونتهای سفارشی را از منابع خارجی (مانند فایلهای محلی یا سرورهای دیگر) بارگذاری و در وبسایت خود استفاده کنید. این ویژگی به خصوص در طراحیهایی که نیاز به فونت خاص دارند بسیار کاربردی است.
ساختار کلی @font-face به صورت زیر است:
@font-face {
font-family: 'CustomFont';
src: url('fonts/CustomFont.woff2') format('woff2'),
url('fonts/CustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
در اینجا:
font-family نامی دلخواه برای فونت تعیین میکند که میتوانید در استایلهای CSS از آن استفاده کنید.
src مسیر فایل فونت را مشخص میکند که میتواند محلی یا از طریق URL باشد.
font-weight و font-style ویژگیهایی هستند که نوع وزن و استایل فونت را تعیین میکنند.
برای استفاده از فونتهای سفارشی، باید به چندین فرمت مختلف فونت توجه کنید تا مرورگرهای مختلف به درستی آنها را شناسایی کنند. برخی از فرمتهای رایج عبارتاند از:
WOFF و WOFF2: این فرمتها بهینهترین فرمتها برای استفاده در وب هستند و توسط اکثر مرورگرها پشتیبانی میشوند.
TTF (TrueType Font): این فرمت توسط بسیاری از مرورگرها پشتیبانی میشود اما نسبت به WOFF و WOFF2 حجم بیشتری دارد.
EOT (Embedded OpenType): این فرمت توسط اینترنت اکسپلورر پشتیبانی میشود و در پروژههای مدرن کمتر استفاده میشود.
SVG: این فرمت برای فونتهای قدیمیتر و مرورگرهایی که SVG را پشتیبانی میکنند، به کار میرود و معمولاً برای آیکونها استفاده میشود.
در اینجا نمونهای از تعریف @font-face برای فونت سفارشی و استفاده از آن در عناصر مختلف ارائه شده است:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
در اینجا:
MyCustomFont به عنوان فونت پیشفرض برای body تعریف شده است و اگر به هر دلیلی این فونت بارگذاری نشود، فونتهای Arial و sans-serif به عنوان جایگزین استفاده میشوند.
اگر یک فونت سفارشی شامل وزنها و استایلهای مختلف مانند Bold یا Italic باشد، میتوانید از چندین @font-face برای تعریف هر یک از این استایلها استفاده کنید.
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont-Italic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
}
در اینجا:
وزن و استایلهای مختلف (Bold و Italic) برای MyCustomFont تعریف شدهاند و در صورت نیاز میتوانید در CSS از آنها استفاده کنید.
پس از تعریف فونت در @font-face، میتوانید آن را به سادگی در CSS به عنوان مقدار font-family به کار ببرید.
h1 {
font-family: 'MyCustomFont', sans-serif;
}
p {
font-family: 'MyCustomFont', Arial, sans-serif;
font-weight: bold;
}
در اینجا:
MyCustomFont به عنوان فونت سفارشی برای عنوان h1 و پاراگراف p استفاده میشود.
از فرمتهای WOFF2 و WOFF به دلیل بهینهبودن آنها برای وب استفاده کنید.
فایلهای فونت را فشردهسازی کنید و مطمئن شوید که فقط وزنها و استایلهای مورد نیاز خود را بارگذاری میکنید.
برای اطمینان از سازگاری با مرورگرهای قدیمیتر، میتوانید فرمتهای EOT و SVG را نیز اضافه کنید:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.eot'); /* برای IE */
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff'),
url('fonts/MyCustomFont.ttf') format('truetype'),
url('fonts/MyCustomFont.svg#MyCustomFont') format('svg');
}
همیشه یک فونت جایگزین (مانند sans-serif یا Arial) تعریف کنید تا در صورتی که فونت سفارشی به هر دلیلی بارگذاری نشد، متن همچنان به خوبی نمایش داده شود.
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
برای بهبود زمان بارگذاری صفحه، از تکنیکهای lazy loading یا تاخیر در بارگذاری فونتها استفاده کنید. برخی ابزارهای فونت مانند Google Fonts این امکان را فراهم میکنند.
ویژگی @font-face در CSS یکی از ابزارهای قدرتمند برای افزودن فونتهای سفارشی به وبسایت شما است. با استفاده از این ویژگی، میتوانید به طراحی سایت خود ظاهری منحصر به فرد ببخشید و تجربه کاربری بهتری ایجاد کنید. با رعایت نکات بهینهسازی و استفاده از فرمتهای مناسب، میتوانید از فونتهای سفارشی به طور کارآمد و سازگار با مرورگرهای مختلف بهره ببرید.
نظری یافت نشد
آموزش ایجاد تصویر و لینک در HTML: نحوه استفاده از تگهای img و a
21م مرداد 1402
مطالعه بیشتر
مفهوم برنامهنویسی همزمان و ناهمزمان در جاوا اسکریپت: تفاوتها، مثالها و کاربردها
29م مهر 1403
مطالعه بیشتر
آموزش استفاده از تگهای تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب
29م مرداد 1402
مطالعه بیشتر
الگوهای رایج برنامهنویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثالها
1م آبان 1403
مطالعه بیشتر
آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایلدهی حرفهای به متنها
5م شهریور 1402
مطالعه بیشتر
مفاهیم Promise و چگونگی استفاده از آن در جاوا اسکریپت: راهنمای کامل همراه با مثالها
30م مهر 1403
مطالعه بیشتر
آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر
11م آبان 1403
مطالعه بیشتر
استفاده از display در CSS: تغییر نحوه نمایش عناصر - راهنمای جامع
9م آبان 1403
مطالعه بیشتر
آموزش ارثبری (Inheritance) در جاوا اسکریپت: نحوه استفاده از پروتوتایپها و کلاسها
28م مهر 1403
مطالعه بیشتر
آموزش ایجاد Transitions و انیمیشنهای صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب
16م آبان 1403
مطالعه بیشتر
بررسی کتابخانههای محبوب جاوا اسکریپت: آشنایی با Lodash و Moment.js - مزایا و کاربردها
4م آبان 1403
مطالعه بیشتر
آموزش اصول Web APIs و نحوه استفاده از آنها در جاوا اسکریپت: راهنمای کامل با مثالها
1م آبان 1403
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد