استفاده از font face در CSS برای اضافه کردن فونت‌های سفارشی: راهنمای کامل

دسته : آموزش رایگان CSS

استفاده از font face در CSS برای اضافه کردن فونت‌های سفارشی: راهنمای کامل

استفاده از font face در CSS برای اضافه کردن فونت‌های سفارشی: راهنمای کامل

@font-face یکی از قابلیت‌های CSS است که به شما اجازه می‌دهد فونت‌های سفارشی را به وب‌سایت خود اضافه کنید. با استفاده از این ویژگی، دیگر نیازی به استفاده از فونت‌های پیش‌فرض مرورگرها ندارید و می‌توانید فونت‌های دلخواه و متنوعی را به طراحی خود اضافه کنید. در این مقاله، به نحوه استفاده از @font-face، ساختار آن و نکات مربوط به استفاده بهینه از فونت‌های سفارشی می‌پردازیم.

 

مفهوم @font-face و کاربرد آن در CSS

@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-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 استفاده می‌شود.

 

نکات و بهترین شیوه‌ها برای استفاده از @font-face در CSS

 

بهینه‌سازی و کاهش حجم فایل‌های فونت

  • از فرمت‌های 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');
}

 

استفاده از فونت‌های fallback

همیشه یک فونت جایگزین (مانند sans-serif یا Arial) تعریف کنید تا در صورتی که فونت سفارشی به هر دلیلی بارگذاری نشد، متن همچنان به خوبی نمایش داده شود.



body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}

 

استفاده از lazy loading برای فونت‌ها

برای بهبود زمان بارگذاری صفحه، از تکنیک‌های lazy loading یا تاخیر در بارگذاری فونت‌ها استفاده کنید. برخی ابزارهای فونت مانند Google Fonts این امکان را فراهم می‌کنند.

 

نتیجه‌گیری

ویژگی @font-face در CSS یکی از ابزارهای قدرتمند برای افزودن فونت‌های سفارشی به وب‌سایت شما است. با استفاده از این ویژگی، می‌توانید به طراحی سایت خود ظاهری منحصر به فرد ببخشید و تجربه کاربری بهتری ایجاد کنید. با رعایت نکات بهینه‌سازی و استفاده از فرمت‌های مناسب، می‌توانید از فونت‌های سفارشی به طور کارآمد و سازگار با مرورگرهای مختلف بهره ببرید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

مفاهیم پیشرفته اشیاء در جاوا اسکریپت: مدیریت خصوصیات و متدها

مفاهیم پیشرفته اشیاء در جاوا اسکریپت: مدیریت خصوصیات و متدها

4م مهر 1403

مطالعه بیشتر

آموزش توسعه و مدیریت پروژه‌های بزرگ در جاوا اسکریپت: آشنایی با ابزارها و فریم‌ورک‌های کاربردی

آموزش توسعه و مدیریت پروژه‌های بزرگ در جاوا اسکریپت: آشنایی با ابزارها و فریم‌ورک‌های کاربردی

4م آبان 1403

مطالعه بیشتر

آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی

آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی

4م آبان 1403

مطالعه بیشتر

آموزش لیست‌ها در HTML: طراحی و استایل‌دهی لیست‌های مرتب و نامرتب

آموزش لیست‌ها در HTML: طراحی و استایل‌دهی لیست‌های مرتب و نامرتب

20م مرداد 1402

مطالعه بیشتر

آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننت‌ها

آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننت‌ها

28م شهریور 1402

مطالعه بیشتر

آموزش قالب‌بندی متن در HTML: استفاده از تگ‌ها و CSS برای استایل‌دهی

آموزش قالب‌بندی متن در HTML: استفاده از تگ‌ها و CSS برای استایل‌دهی

23م مرداد 1402

مطالعه بیشتر

JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد

JSX و رندرینگ مؤثر در React.js: بهینه‌سازی کامپوننت‌ها و بهبود عملکرد

28م شهریور 1402

مطالعه بیشتر

آموزش مفاهیم پایه‌ای اشیاء در جاوا اسکریپت: تعریف، ویژگی‌ها و متدها

آموزش مفاهیم پایه‌ای اشیاء در جاوا اسکریپت: تعریف، ویژگی‌ها و متدها

2م شهریور 1403

مطالعه بیشتر

آموزش تغییر المان‌های DOM: ویرایش متن، سبک‌ها و کلاس‌ها در جاوا اسکریپت - راهنمای کامل با مثال‌ها

آموزش تغییر المان‌های DOM: ویرایش متن، سبک‌ها و کلاس‌ها در جاوا اسکریپت - راهنمای کامل با مثال‌ها

2م آبان 1403

مطالعه بیشتر

مقدمه‌ای بر CSS و نحوه اضافه کردن آن به HTML: راهنمای ساده و کامل برای مبتدیان

مقدمه‌ای بر CSS و نحوه اضافه کردن آن به HTML: راهنمای ساده و کامل برای مبتدیان

4م شهریور 1402

مطالعه بیشتر

آموزش توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام

آموزش توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام

5م آبان 1403

مطالعه بیشتر

معرفی DOM و اصول آن در جاوا اسکریپت: راهنمای جامع برای مبتدیان

معرفی DOM و اصول آن در جاوا اسکریپت: راهنمای جامع برای مبتدیان

1م آبان 1403

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد