راز استفاده از فونت‌های فارسی خاص در وب 🇮🇷
فونت‌های وب: فراتر از فونت‌های سیستمی! 🚀
سلام به همراهان همیشگی! تا اینجا درباره فونت‌های سیستمی صحبت کردیم. اما اگه بخوایم از فونت‌های خاص و زیبایی استفاده کنیم که شاید کاربر ما نداشته باشه چی؟ مثلاً فونت‌های دست‌نویس یا فونت‌های خلاقانه دیگه‌ای که توی طراحیمون مد نظرمونه؟ اینجاست که فونت‌های وب (Web Fonts) وارد صحنه می‌شن! 🤩
فونت‌های وب به ما اجازه می‌دن که فونت‌های دلخواه رو همراه با صفحات وب خودمون ارائه بدیم. دو روش اصلی برای استفاده از فونت‌های وب وجود داره:
1. استفاده از @font-face: فونت شخصی شما! 📁
دستور `@font-face` به شما اجازه می‌ده که فایل‌های فونت خودتون رو مستقیماً در CSS معرفی کنین. این یعنی کنترل کامل روی فونت‌هایی که استفاده می‌کنین.
مراحل کار:
- تهیه فایل‌های فونت: شما نیاز به فایل‌های فونت در فرمت‌های مختلف دارین تا مرورگرهای مختلف بتونن ازشون استفاده کنن. فرمت‌های رایج عبارتند از:
- `.woff2` (جدیدترین و بهینه‌ترین فرمت)
- `.woff` (پشتیبانی خوب)
- `.ttf` (TrueType)
- `.eot` (برای IE قدیمی)
- `.svg` (برای iOS قدیمی)
- قرار دادن فایل‌ها: فایل‌های فونت رو در پوشه‌ای از پروژه خودتون (مثلاً یه پوشه به اسم `fonts`) قرار بدین.
- نوشتن کد @font-face: در ابتدای فایل CSS خودتون، از `@font-face` استفاده کنین.
مثال: فرض کنیم فایل وزیر ما در مسیر `fonts/vazir.woff2` و `fonts/vazir.woff` قرار داره.
@font-face {
font-family: 'Vazir'; /* اسمی که خودتون برای فونت انتخاب می‌کنید */
src: url('fonts/vazir.woff2') format('woff2'), /* اول فرمت جدیدتر */
url('fonts/vazir.woff') format('woff'); /* بعد فرمت قدیمی‌تر */
font-weight: normal; /* وزن فونت */
font-style: normal; /* سبک فونت (عادی یا ایتالیک) */
font-display: swap; /* نحوه نمایش فونت قبل از بارگذاری کامل */
}
/* حالا می‌تونیم از این فونت استفاده کنیم */
body {
font-family: 'Vazir', sans-serif;
}
font-family: اسمی که به این فونت اختصاص می‌دین و بعداً در CSS استفاده می‌کنین.src: مسیر فایل(های) فونت. با `format()` مشخص می‌کنیم نوع فرمت چیه.font-weightوfont-style: اگه فونت شما وزن‌ها یا سبک‌های مختلفی داره (مثلاً Bold یا Italic)، باید برای هر کدوم یه `@font-face` جدا تعریف کنین.font-display: این ویژگی مهمه! `swap` یعنی متن با فونت سیستمی نمایش داده بشه تا فونت وب لود بشه، بعد فونت وب جایگزینش می‌شه. این از سفید موندن صفحه جلوگیری می‌کنه.
استفاده از `@font-face` برای فونت‌هایی که می‌خواین همیشه در دسترس باشن و فایلشون رو خودتون مدیریت کنین، عالیه. فقط حواستون به حجم فایل فونت باشه، چون مستقیماً روی سرعت بارگذاری صفحه تاثیر می‌ذاره.
2. سرویس‌های خارجی فونت: راحتی و تنوع! 🌐
سرویس‌هایی مثل Google Fonts و Adobe Fonts (قبلاً Adobe Typekit) یه عالمه فونت زیبا رو به صورت رایگان (یا پولی برای Adobe Fonts) در اختیار ما قرار می‌دن. استفاده از اینها خیلی ساده‌تر از مدیریت فایل‌های فونت خودتونه.
نحوه کار با Google Fonts (مثال):
- به سایت Google Fonts برین: fonts.google.com
- فونت دلخواهتون رو پیدا کنین: می‌تونین جستجو کنین، فیلتر بزنین (مثلاً فقط فونت‌های فارسی) و فونت مورد نظرتون رو انتخاب کنین.
- وزن‌ها و سبک‌ها رو انتخاب کنین: در صفحه هر فونت، وزن‌ها و سبک‌های مختلفی که می‌خواین رو انتخاب کنین (هر چی بیشتر انتخاب کنین، حجم بارگذاری بیشتر می‌شه).
- کد لازم رو کپی کنین: در قسمت “Selected families” یا مشابه اون، گوگل به شما یه تگ `` برای قرار دادن در بخش `` فایل HTML، یا یه کد `@import` برای قرار دادن در فایل CSS می‌ده.
مثال با استفاده از `` در HTML:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>فونت وب</title>
<!-- این خط رو از Google Fonts کپی کردیم -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Vazirmatn:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>عنوان با فونت جدید!</h1>
<p>این متن با فونت فارسی جدید استایل داده شده.</p>
</body>
</html>
مثال با استفاده از `@import` در CSS:
/* این خط رو از Google Fonts کپی کردیم و در ابتدای فایل style.css قرار می‌دیم */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Vazirmatn:wght@100..900&display=swap');
body {
font-family: 'Vazirmatn', sans-serif; /* فونت اصلی */
}
h1 {
font-family: 'Open Sans', sans-serif; /* یه فونت دیگه برای عنوان */
font-weight: 700;
}
استفاده از سرویس‌های خارجی خیلی راحته و تنوع فونت فوق‌العاده‌ای رو در اختیارتون قرار می‌ده. فقط یادتون باشه که هر فونتی که اضافه می‌کنین، سرعت بارگذاری صفحه رو کمی بیشتر می‌کنه. پس فقط فونت‌هایی رو که واقعاً نیاز دارین، انتخاب کنین.
فونت‌های وب، ابزار قدرتمندی برای افزایش زیبایی و شخصیت‌بخشی به وب‌سایت شما هستن. چه با `@font-face` و کنترل کامل، چه با سرویس‌های خارجی و راحتی بیشتر، انتخاب با شماست! ازشون بهترین استفاده رو ببرین! 🎨