حساب کاربری

آموزش استفاده از فونت‌های سفارشی در طراحی وب با CSS

یکی از جذاب‌ترین بخش‌های طراحی وب، استفاده از فونت‌های سفارشی است. این کار به شما اجازه می‌دهد ظاهر سایت‌تان را دقیقاً مطابق با هویت بصری و سلیقه‌تان بسازید، بدون اینکه وابسته به فونت‌های پیش‌فرض سیستم کاربر باشید.

🧱 چرا فونت سفارشی؟

  • فونت‌های پیش‌فرض روی همه سیستم‌ها یکسان نیستند.
  • با فونت سفارشی می‌توانید برندینگ و زیبایی خاصی به سایت بدهید.
  • مرورگرها می‌توانند فایل فونت را دانلود کنند و نمایش دهند، حتی اگر روی سیستم کاربر نصب نباشد.

📂 روش‌های استفاده از فونت

  1. سرویس‌های میزبانی‌شده (Hosted Solutions)
    • مثل Google Fonts یا Adobe Fonts.
    • کافیست یک لینک یا اسکریپت در <head> قرار دهید و سپس در CSS از نام فونت استفاده کنید.
    • ساده و سریع، اما وابسته به سرویس خارجی.
  2. فونت‌های خود میزبان (Self-hosted Fonts)
    • فایل‌های فونت روی سرور شما قرار دارند.
    • نیاز به مدیریت دستی و معرفی در CSS با دستور @font-face.
    • انعطاف‌پذیرتر و مستقل از سرویس‌های خارجی.

🎨 مثال عملی: فونت PT Sans

مرحله اول: قرار دادن فایل‌ها در پروژه

ساختار پوشه‌ها:

project/
├── index.html
├── css/
│   ├── style.css
│   └── fonts/
│       ├── PTSans.woff
│       ├── PTSans.eot
│       ├── PTSans.ttf
│       └── PTSans.svg

مرحله دوم: معرفی فونت در CSS

@font-face {
  font-family: 'PT Sans';
  src: url('fonts/PTSans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

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

🌍 پشتیبانی از مرورگرهای مختلف

برای سازگاری کامل، همه فرمت‌ها را معرفی کنید:

@font-face {
  font-family: 'PT Sans';
  src: url('fonts/PTSans.eot'); /* IE9 */
  src: url('fonts/PTSans.eot?#iefix') format('embedded-opentype'),
       url('fonts/PTSans.woff') format('woff'),
       url('fonts/PTSans.ttf') format('truetype'),
       url('fonts/PTSans.svg#PTSans') format('svg');
  font-weight: normal;
  font-style: normal;
}

🔠 نسخه‌های مختلف فونت

برای بولد و ایتالیک بهتر است فایل‌های اختصاصی استفاده کنید:

@font-face {
  font-family: 'PT Sans';
  src: url('fonts/PTSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'PT Sans';
  src: url('fonts/PTSans-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'PT Sans';
  src: url('fonts/PTSans-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

📌 نکات پایانی

  • هر فونت چند فایل دارد؛ تعداد زیاد فونت‌ها حجم دانلود را بالا می‌برد.
  • بهتر است از تعداد کمی فونت استفاده کنید تا طراحی ساده و حرفه‌ای بماند.
  • همیشه قبل از استفاده، مجوز قانونی فونت را بررسی کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *