دسته : آموزش رایگان 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 یکی از ابزارهای قدرتمند برای افزودن فونتهای سفارشی به وبسایت شما است. با استفاده از این ویژگی، میتوانید به طراحی سایت خود ظاهری منحصر به فرد ببخشید و تجربه کاربری بهتری ایجاد کنید. با رعایت نکات بهینهسازی و استفاده از فرمتهای مناسب، میتوانید از فونتهای سفارشی به طور کارآمد و سازگار با مرورگرهای مختلف بهره ببرید.
نظری یافت نشد
مفاهیم پیشرفته اشیاء در جاوا اسکریپت: مدیریت خصوصیات و متدها
4م مهر 1403
مطالعه بیشتر
آموزش توسعه و مدیریت پروژههای بزرگ در جاوا اسکریپت: آشنایی با ابزارها و فریمورکهای کاربردی
4م آبان 1403
مطالعه بیشتر
آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثالهای کاربردی
4م آبان 1403
مطالعه بیشتر
آموزش لیستها در HTML: طراحی و استایلدهی لیستهای مرتب و نامرتب
20م مرداد 1402
مطالعه بیشتر
آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننتها
28م شهریور 1402
مطالعه بیشتر
آموزش قالببندی متن در HTML: استفاده از تگها و CSS برای استایلدهی
23م مرداد 1402
مطالعه بیشتر
JSX و رندرینگ مؤثر در React.js: بهینهسازی کامپوننتها و بهبود عملکرد
28م شهریور 1402
مطالعه بیشتر
آموزش مفاهیم پایهای اشیاء در جاوا اسکریپت: تعریف، ویژگیها و متدها
2م شهریور 1403
مطالعه بیشتر
آموزش تغییر المانهای DOM: ویرایش متن، سبکها و کلاسها در جاوا اسکریپت - راهنمای کامل با مثالها
2م آبان 1403
مطالعه بیشتر
مقدمهای بر CSS و نحوه اضافه کردن آن به HTML: راهنمای ساده و کامل برای مبتدیان
4م شهریور 1402
مطالعه بیشتر
آموزش توسعه بازیهای ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام
5م آبان 1403
مطالعه بیشتر
معرفی DOM و اصول آن در جاوا اسکریپت: راهنمای جامع برای مبتدیان
1م آبان 1403
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد