هدر سایت

به رایا وردپرس خوش آمدید

آموزش CSS

جلسه 15 آموزش CSS: فونت (Font) در CSS

آخرین بروزرسانی: 26 فروردین 1404
بدون دیدگاه
زمان مطالعه: 6 دقیقه

آموزش CSS

جلسه 15 آموزش CSS: فونت (Font) در CSS

ادیتور کد آنلاین رایاوردپرس کدهای این مقاله را می‌توانید در ادیتور آنلاین ما تست کنید تا مفاهیم را بهتر یاد بگیرید! امتحان کن سلام! خوش اومدی به یه جلسه دیگه از آموزش CSS! 😍 تو این مقاله قراره با هم غرق دنیای فونت‌ها بشیم و همه چی رو درباره کار

ادیتور کد آنلاین رایاوردپرس

کدهای این مقاله را می‌توانید در ادیتور آنلاین ما تست کنید تا مفاهیم را بهتر یاد بگیرید!

امتحان کن

سلام! خوش اومدی به یه جلسه دیگه از آموزش CSS! 😍 تو این مقاله قراره با هم غرق دنیای فونت‌ها بشیم و همه چی رو درباره کار با فونت تو CSS یاد بگیریم.

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

✅ فونت‌ (Font) در CSS

فونت‌ها تو CSS با یه سری ویژگی کنترل می‌شن که هر کدوم یه جنبه از ظاهر متن رو تغییر می‌دن. اینجا همه ویژگی‌های مهم رو برات لیست کردم و بعدش هر کدوم رو با جزئیات و مثال توضیح می‌دم:

font-family : نام فونت
font-style : استایل فونت
font-size : اندازه فونت
font-weight : وزن فونت

هستن که برات مثال می‌زنم که ببینی چطور کار می‌کنن.

📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

1. ویژگی font-family (نام فونت)

این ویژگی بهت اجازه می‌ده نام فونت دلخواهت رو برای متن انتخاب کنی. می‌تونی یه فونت بنویسی یا چندتا فونت جایگزین رو با کاما جدا کنی.

مثلاً اگه بخوای فونت یه پاراگراف رو به “Arial” تغییر بدی، کافیه این به صورت زیر از ویژگی font-family استفاده کنی :

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

تو این کد، مرورگر اول سعی می‌کنه از فونت Arial استفاده کنه، اگه این فونت موجود نبود سراغ Helvetica می‌ره و در نهایت یه فونت sans-serif پیش‌فرض رو انتخاب می‌کنه. اگه اسم فونت چند کلمه‌ای باشه یعنی لازم باشه بین کلمات فاصله ایجاد کنی و یکپارچه و بهم چسبیده نباشه حروف بهتره برای اینکه تمام مرورگرها به درستی نمایش بدن اون فوت رو داخل دابل کوتیشن بزاریش ( اینشکلی: “Times New Roman”)

2. ویژگی font-style (استایل فونت)

با این ویژگی می‌تونی استایل فونت رو تغییر بدی. مقدارهای فونت استایل به صورت زیره:

normal: فونت معمولی
italic: فونت کج یا ایتالیک

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

هر متنی که تو تگ <span> باشه، کج یا ایتالیک نمایش داده می‌شه. برای تأکید روی متن خیلی کاربردیه!

3. ویژگی font-size (اندازه فونت)

این ویژگی اندازه فونت رو تعیین می‌کنه. می‌تونی از واحدهای مختلف مثل px, em, rem یا % استفاده کنی:

px: اندازه ثابت
em: نسبت به فونت والد
rem: نسبی به فونت ریشه (تگ <html>)
%: درصدی از فونت والد

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

اینجا h1 اندازه 32 پیکسل داره و پاراگراف‌ها 1.1 برابر فونت ریشه هستن.

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 به دو دسته اصلی تقسیم می‌شن که باید بشناسیشون:

فونت‌ های پیش فرض سیستمی: اینا فونت‌هایی هستن که تقریباً روی همه سیستم‌ها و مرورگرها نصبن، مثل Arial, Times New Roman یا Verdana. چون خیالت راحته که همه کاربرات می‌تونن ببیننشون، انتخاب مطمئنی هستن.
فونت‌های دلخواه (Custom fonts): این فونت‌ها رو خودت باید به سایتت اضافه کنی. می‌تونی از سرویس‌هایی مثل Google Fonts استفاده کنی یا فایل فونت رو خودت آپلود کنی. اینا به سایتت یه ظاهر خاص و یونیک می‌دن، ولی باید حواست باشه که سرعت لود سایتت رو پایین نیارن.

هر کدوم از اینا کاربرد خودشون رو دارن، تو فقط باید بدونی کجا ازشون استفاده کنی! 😉

فونت پیش‌فرض سیستمی

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

تو این کد، اگه فونت Arial نباشه، مرورگر سراغ Helvetica می‌ره و اگه اونم نبود، یه فونت sans-serif پیش‌فرض رو انتخاب می‌کنه. اینجوری همیشه یه پلن B داری! 😎

فونت دلخواه

اگه می‌خوای یه فونت خاص و خفن رو تو سایتت داشته باشی، دو راه داری:

سرویس‌های آنلاین مثل Google Fonts: برو به سایت Google Fonts، فونت مورد نظرت رو انتخاب کن و کدی که بهت می‌ده رو تو CSSت بذار. مثلاً برای فونت “Lato”:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

اینجا فونت Lato رو وارد کردی و به بدنه سایتت اعمالش کردی.

آپلود فونت روی سایت: اگه میخای از یه فونت خاص استفاده کنی، می‌تونی اونو روی هاستت آپلود کنی و با @font-face تعریفش کنی. مثال:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

اینجوری فونتت رو کاملاً شخصی‌سازی کردی!

نکته مهم: خلاصه نویسی ویژگی های فونت

خیلی خب رفیق 😉! قبل از اینکه این مبحث فونت رو ببندیم و باهات خداحافظی کنم، بد نیست این نکته رو بهت بگم که تو می‌تونی برای اینکه کدنویسی تمیزتری داشته باشی و حجم کدهات کمتر باشه، ویژگی‌های فونت رو به صورت خلاصه و کوتاه بنویسی.

با این روش می‌تونی ویژگی‌هایی مثل سبک فونت، وزن، اندازه، فاصله خطوط و نوع فونت رو یه جا مشخص کنی. اینجوری هم کدت تمیزتر می‌شه هم تو وقتت صرفه جویی میشه!

به این روش میگن استفاده از شورت‌هند font! حالا که اینو گفتم، بذار یه کم بیشتر در موردش بهت توضیح بدم 👇

شورت‌هند font یه روش خلاصه و باحال برای تنظیم چندتا ویژگی فونت تو یه خط کد CSS هست! بزار با مثال بگم تا موضوع کامل واست جا بیافته!

ببین فرمت کلی اینشکلی هست:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

نکته مهم: font-size و font-family حتماً باید باشن، بقیه رو می‌تونی نذاری و اختیاری هستن.

فرض کن می‌خوای متن پاراگرافت کج، پررنگ، اندازه 20px، فاصله خطوط 1.6 و فونت “Lalezar” باشه:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|

italic: فونت کج می‌شه ✍️
bold: وزن فونت پررنگه 💪
20px: اندازه فونته 📏
1.6: فاصله خطوط 1.6 برابر اندازه فونته 📐
“Lalezar”, sans-serif: فونت اصلی و جایگزینش 🎨

جمع بندی : تو حالا یه استاد فونت CSS هستی! 🏆

تبریک می‌گم! 🎉 دیگه با همه رمز و رازهای فونت تو CSS آشنا شدی. از انتخاب فونت با font-family گرفته تا تنظیم اندازه و وزن با font-size و font-weight، حالا می‌تونی هر متنی رو جوری طراحی کنی که به زیبایی سایتت و حس خوب اون کمک کنه.

اگه سوالی داری یا ایده‌ای به ذهنت رسید، تو کامنت‌ها برام بنویس! این مقاله رو با دوستات هم به اشتراک بذار تا اونا هم از این دنیای جذاب سر دربیارن. موفق باشی و همیشه بدرخشی! ✨

5/5 - (3 امتیاز)

جلسه 2 آموزش CSS: سینتکس CSS – اصول پایه و قواعد نوشتاری

جلسه 2 آموزش CSS: سینتکس CSS – اصول پایه و قواعد نوشتاری

جلسه 12 آموزش CSS: ویژگی width و height در CSS

جلسه 12 آموزش CSS: ویژگی width و height در CSS

جلسه 10 آموزش CSS: فاصله داخلی (Padding) در CSS

جلسه 10 آموزش CSS: فاصله داخلی (Padding) در CSS

اگه از مطالب سایت استفاده کردی و کارت رو راه انداخته، می‌تونی با یه حمایت کوچیک بهمون انگیزه بدی تا با قدرت کار تولید محتوای خفن تر و جذاب تر رو پیش ببریم 😉🥰

❤️ حمایت از رایا وردپرس

ارسال نظر ( 0 نظر تایید شده )

22 نفر در حال مطالعه

1864 بازدید اخیر

14 این پست رو بوکمارک کردن

6 دقیقه مطالعه

ما رو در شبکه های اجتماعی دنبال کن 😉❤️

سعید

400 مقاله

عاشق یادگیری و پیشرفت در برنامه نویسی و ارتقا مهارت هام هستم. سعی میکنم دانش و تجربیات ارزشمندم رو در رایا وردپرس باهاتون به اشتراک بزارم :)

مشاهده همه مقالات