سلام! خوش اومدی به یه جلسه دیگه از آموزش CSS! 😍 تو این مقاله قراره با هم غرق دنیای فونت‌ها بشیم و همه چی رو درباره کار با فونت تو CSS یاد بگیریم.
فونت‌ها مثل امضای خاص هر طراحی هستن و با انتخاب درستشون میتونی حس و حال خوبی به مخاطبت بدی و تجربه کاربری رو بهتر کنی. تو این جلسه، قراره یاد بگیری چطور فونت دلخواهت رو انتخاب کنی، چطور ظاهر متن‌هات رو شخصی‌سازی کنی و کلی ترفند باحال دیگه. پس تا آخر این پست با من باش🥰
✅ فونت (Font) در CSS
فونت‌ها تو CSS با یه سری ویژگی کنترل می‌شن که هر کدوم یه جنبه از ظاهر متن رو تغییر می‌دن. اینجا همه ویژگی‌های مهم رو برات لیست کردم و بعدش هر کدوم رو با جزئیات و مثال توضیح می‌دم:
- font-family : نام فونت
- font-style : استایل فونت
- font-size : اندازه فونت
- font-weight : وزن فونت
هستن که برات مثال می‌زنم که ببینی چطور کار می‌کنن.
جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS
📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD
1. ویژگی font-family (نام فونت)
این ویژگی بهت اجازه می‌ده نام فونت دلخواهت رو برای متن انتخاب کنی. میتونی یه فونت بنویسی یا چندتا فونت جایگزین رو با کاما جدا کنی.
مثلاً اگه بخوای فونت یه پاراگراف رو به “Arial” تغییر بدی، کافیه این به صورت زیر از ویژگی font-family استفاده کنی :
تو این کد، مرورگر اول سعی می‌کنه از فونت Arial استفاده کنه، اگه این فونت موجود نبود سراغ Helvetica می‌ره و در نهایت یه فونت sans-serif پیش‌فرض رو انتخاب می‌کنه. اگه اسم فونت چند کلمه‌ای باشه یعنی لازم باشه بین کلمات فاصله ایجاد کنی و یکپارچه و بهم چسبیده نباشه حروف بهتره برای اینکه تمام مرورگرها به درستی نمایش بدن اون فوت رو داخل دابل کوتیشن بزاریش ( اینشکلی: “Times New Roman”)
جلسه 17 آموزش CSS: لینک ها (link) در CSS
2. ویژگی font-style (استایل فونت)
با این ویژگی میتونی استایل فونت رو تغییر بدی. مقدارهای فونت استایل به صورت زیره:
- normal: فونت معمولی
- italic: فونت کج یا ایتالیک
هر متنی که تو تگ <span> باشه، کج یا ایتالیک نمایش داده میشه. برای تأکید روی متن خیلی کاربردیه!
3. ویژگی font-size (اندازه فونت)
این ویژگی اندازه فونت رو تعیین می‌کنه. میتونی از واحدهای مختلف مثل px, em, rem یا % استفاده کنی:
- px: اندازه ثابت
- em: نسبت به فونت والد
- rem: نسبی به فونت ریشه (تگ <html>)
- %: درصدی از فونت والد
اینجا h1 اندازه 32 پیکسل داره و پاراگراف‌ها 1.1 برابر فونت ریشه هستن.
جلسه 21 آموزش CSS: عناصر Block و Inline در CSS
4. ویژگی font-weight (وزن فونت)
این ویژگی ضخامت فونت رو مشخص می‌کنه. میتونی از اعداد (100 تا 900) یا کلمات مثل normal و bold استفاده کنی:
- normal: وزن معمولی (400)
- bold: وزن پررنگ (700)
نکات کاربردی و مهم 📻
- فونت جایگزین: همیشه چندتا فونت جایگزین تو font-family بذار که اگه فونت اصلی نبود، سایتت بهم نریزه.
- Google Fonts: برای فونت دلخواه، از سرویس‌هایی مثل Google Fonts میتونی استفاده کنی.
- فونت شخصی: با @font-face فونت خودت رو آپلود کن:
تا اینجا با تمام ویژگی‌های فونت تو CSS آشنا شدی! میتونی با font-family فونت دلخواهت رو انتخاب کنی، با font-size و font-weight ظاهرش رو تنظیم کنی و با بقیه ویژگی‌ها حسابی شخصی‌سازیش کنی.
✅ معرفی انواع فونت
فونت ها تو CSS به دو دسته اصلی تقسیم می‌شن که باید بشناسیشون:
جلسه 17 آموزش CSS: لینک ها (link) در CSS
- فونت های پیش فرض سیستمی: اینا فونت‌هایی هستن که تقریباً روی همه سیستم‌ها و مرورگرها نصبن، مثل Arial, Times New Roman یا Verdana. چون خیالت راحته که همه کاربرات می‌تونن ببیننشون، انتخاب مطمئنی هستن.
- فونت‌های دلخواه (Custom fonts): این فونت‌ها رو خودت باید به سایتت اضافه کنی. میتونی از سرویس‌هایی مثل Google Fonts استفاده کنی یا فایل فونت رو خودت آپلود کنی. اینا به سایتت یه ظاهر خاص و یونیک می‌دن، ولی باید حواست باشه که سرعت لود سایتت رو پایین نیارن.
هر کدوم از اینا کاربرد خودشون رو دارن، تو فقط باید بدونی کجا ازشون استفاده کنی! 😉
فونت پیش‌فرض سیستمی
هر سیستم‌عامل و مرورگری یه سری فونت پیش‌فرض داره که اگه فونت اصلیت در دسترس نباشه، از اونا استفاده می‌کنه. برای همین همیشه بهتره چندتا فونت جایگزین هم بذاری که کار خراب نشه.
تو این کد، اگه فونت Arial نباشه، مرورگر سراغ Helvetica می‌ره و اگه اونم نبود، یه فونت sans-serif پیش‌فرض رو انتخاب می‌کنه. اینجوری همیشه یه پلن B داری! 😎
فونت دلخواه
اگه می‌خوای یه فونت خاص و خفن رو تو سایتت داشته باشی، دو راه داری:
جلسه 19 آموزش CSS: جدول (Table) در CSS
- سرویس‌های آنلاین مثل Google Fonts: برو به سایت Google Fonts، فونت مورد نظرت رو انتخاب کن و کدی که بهت می‌ده رو تو CSSت بذار. مثلاً برای فونت “Lato”:
اینجا فونت Lato رو وارد کردی و به بدنه سایتت اعمالش کردی.
- آپلود فونت روی سایت: اگه میخای از یه فونت خاص استفاده کنی، میتونی اونو روی هاستت آپلود کنی و با @font-face تعریفش کنی. مثال:
اینجوری فونتت رو کاملاً شخصی‌سازی کردی!
نکته مهم: خلاصه نویسی ویژگی های فونت
خیلی خب رفیق 😉! قبل از اینکه این مبحث فونت رو ببندیم و باهات خداحافظی کنم، بد نیست این نکته رو بهت بگم که تو میتونی برای اینکه کدنویسی تمیزتری داشته باشی و حجم کدهات کمتر باشه، ویژگی‌های فونت رو به صورت خلاصه و کوتاه بنویسی.
با این روش میتونی ویژگی‌هایی مثل سبک فونت، وزن، اندازه، فاصله خطوط و نوع فونت رو یه جا مشخص کنی. اینجوری هم کدت تمیزتر میشه هم تو وقتت صرفه جویی میشه!
جلسه 16 آموزش CSS: تصاویر (Images) در CSS
به این روش میگن استفاده از شورت‌هند font! حالا که اینو گفتم، بذار یه کم بیشتر در موردش بهت توضیح بدم 👇
شورت‌هند font یه روش خلاصه و باحال برای تنظیم چندتا ویژگی فونت تو یه خط کد CSS هست! بزار با مثال بگم تا موضوع کامل واست جا بیافته!
ببین فرمت کلی اینشکلی هست:
نکته مهم: font-size و font-family حتماً باید باشن، بقیه رو میتونی نذاری و اختیاری هستن.
جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS
فرض کن می‌خوای متن پاراگرافت کج، پررنگ، اندازه 20px، فاصله خطوط 1.6 و فونت “Lalezar” باشه:
- italic: فونت کج میشه ✍️
- bold: وزن فونت پررنگه 💪
- 20px: اندازه فونته 📏
- 1.6: فاصله خطوط 1.6 برابر اندازه فونته 📐
- “Lalezar”, sans-serif: فونت اصلی و جایگزینش 🎨
جمع بندی : تو حالا یه استاد فونت CSS هستی! 🏆
تبریک می‌گم! 🎉 دیگه با همه رمز و رازهای فونت تو CSS آشنا شدی. از انتخاب فونت با font-family گرفته تا تنظیم اندازه و وزن با font-size و font-weight، حالا میتونی هر متنی رو جوری طراحی کنی که به زیبایی سایتت و حس خوب اون کمک کنه.
اگه سوالی داری یا ایده‌ای به ذهنت رسید، تو کامنت‌ها برام بنویس! این مقاله رو با دوستات هم به اشتراک بذار تا اونا هم از این دنیای جذاب سر دربیارن. موفق باشی و همیشه بدرخشی! ✨
جلسه 24 آموزش CSS: مدیا کوئری (Media queries) در CSS
ارسال نظر ( 0 نظر تایید شده )