آموزش کار با فونت ها یا Fonts در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با فونت ها یا Fonts در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با فونت ها یا Fonts در CSS
در این جلسه از سری آموزش های قدم به قدم زبان CSS میخواهیم با فونت ها یا قلم ها کار کنیم، میخواهیم یاد بگیریم که چجوری میتونیم نوع فونت و اندازه فونت یک عنصر را مشخص کنیم.
در این جلسه میخواهیم با ویژگی های زیر از فونت ها آشنا شویم و باهاشون کار کنیم :
- font-family : برای تنظیم نوع فونت یا خانواده فونت
- font-style : برای تنظیم استایل یا حالت نمایشی فونت
- font-size : برای تنظیم اندازه فونت
- font-weight : برای تنظیم وزن فونت
- font-variant : برای تبدیل کردن متن
پیشنهاد میکنم حتما آموزش کامل نحوه اضافه کردن فونت دلخواه در سایت را مشاهده نمایید.
Free-Learn
آموزش کار با ویژگی Font-Family در CSS
با استفاده از این ویژگی میتوان نوع فونت یک صفحه وب را مشخص کرد، در واقع نوع فونت یا خانواده فونت یک عنصر را با استفاده از این ویژگی میتوان مشخص کرد.
+ فونت های پیش فرض
یسری از فونت ها هستن که بصورت پیش فرض در تمامی سیستم های کامپیوتری وجود دارند، اینکه میگیم پیش فرض یعنی یک سیستم کامپیوتری ( همچنین لپ تاپ ها ) وقتی ویندوز روش نصب میشه بصورت پیش فرض تعدادی فونت روش نصب میشه.
و تعدادی فونت هم هستن که بصورت عمومی توسط مرورگرهای اینترنتی پشتیبانی میشوند، یعنی در واقع این فونت های عمومی برای مرورگرها تعریف شده هس و اکثر مرورگرها این فونت هارو پشتیبانی میکنند.
حال اگر ما در صفحه وبمون از هیچ فونت سفارشی ( مثلا فونت مورد علاقمون ) استفاده نکنیم ، اون فونت های پیش فرض یا عمومی که گفتم به کاربر نمایش داده میشن.
از فونت های پیش فرض یک سیستم و فونت های عمومی میتونیم موارد زیر رو نام ببریم :
- Serif
- Sans-serif
- Fantasy
- Times New Roman
- Arial
- Comic Sans MS
- Impact
- Tahoma
- Verdana
- Monospace
+ فونت جایگزین
یعنی چه فونت جایگزین!؟ یعنی اینکه ما وقتی داریم برای صفحه وبمون فونت مشخص میکنیم یک یا چندین فونت هم بصورت جایگزین براش تعریف کنیم تا اگه مثلا فونت اولی به هردلیلی نمایش داده نشد، فونت های جایگزین نمایش داده بشن.
خب ممکنه اصلا اون فونتی که ما تعریف کردیم به هردلیلی فراخوانی نشد و حالا هر دلیل دیگه ، در نتیجه ما برای محکم کاری چنتا فونت دیگه بصورت جایگزین تعریف میکنیم.
تا اگه مثلا فونت اولی فراخوانی نشد فونت دومی فراخوانی و نمایش داده شود و حالا اگه مثلا فونت دومی هم فراخوانی نشد فونت سومی و همینجور تا بی نهایت..
شکل کلی برای تعریف و استفاده از ویژگی font-family و همچنین تعریف فونت های جایگزین :
|
1 |
font-family: font1, font2, font3, font4,...font*n ; |
پس فونت اولی میشه فونت اصلی ما، اگه به هر دلیلی فونت شماره ۱ نمایش داده نشد فونت های بعدی جایگزین میشن و همینطور تا ادامه.
نکته در مورد فونت های چند کلمه ای
اصلا یعنی چه فونت های چند کلمه ای؟ فونتی که اسمش چند کلمه باشه و لازم باشه بین کلمات فاصله گذاشته شه میشه فونت چند کلمه ای، مثله :
|
1 |
Times New Roman |
خب ! این فونت هارو باید درون دابل کوتیشن گذاشت ، یعنی درون ” “ . برای مثال لطفا به دستورات زیر توجه نمایید و برای مشاهده آنلاین بروی دکمه (امتحان کنید) کلیک کنید.
مثال :
|
1 2 3 4 5 6 7 |
<style> body{ font-family: "Times New Roman", tahoma, serif; } </style> |
Free-Learn
آموزش کار با ویژگی Font-Style در CSS
با استفاده از این ویژگی میتوان استایل / سبک یک فونت را مشخص کرد، مثلا اینکه فونت بصورت کج شده نمایش داده شود یا نه مثلا بصورت مورب.
میتوان از مقادیر زیر استفاده نمود :
- normal : بصورت پیش فرض این گزینه می باشد
- Italic : بصورت شکسته / کج نمایش داده می شود
- oblique : بصورت مورب نمایش داده می شود
مثال :
|
1 2 3 4 5 6 7 |
<style> body{ font-style:italic; } </style> |
Free-Learn
آموزش کار با ویژگی Font-Size در CSS
همونطور که از اسم این ویژگی مشخصه با استفاده از آن میتوان اندازه فونت یک عنصر را مشخص و یا بطور کلی تعریف کرد.
مثال :
|
1 2 3 4 5 6 7 |
<style> body{ font-size:20px; } </style> |
Free-Learn
آموزش کار با ویژگی Font-Weight در CSS
با استفاده از این ویژگی میتوان وزن یک فونت را مشخص کرد، یعنی در واقع میزان نازکی و کلفت بودن یک فونت میشه وزنش که ما با استفاده از این ویژگی میتوانیم آن را تنظیم نماییم.
ما اگه بخوایم یک فونت رو در وزن های مختلفی نشون بدیم ، باید حتما خوده اون فونت در وزن های مختلف وجود داشته باشه، به همین خاطر هر فونتی رو نمیشه وزنش رو تغییر داد.
این ویژگی مقادیر زیر رو میتونه بپذیره :
- normal : بصورت پیش فرض این گزینه است
- bold : کلفت یا پررنگ
- bolder : کمی کلفت تر یا پررنگ تر
- lighter : فونت در وزن لاغر
- ۱۰۰ – ۹۰۰ : وزن فونت را بصورت عددی میتوان مشخص کرد
مثال : استفاده از حالت عددی (از ۱۰۰ شروع میشه و لاغر است و تا ۹۰۰ همینجور هی چاق میشه)
|
1 2 3 4 5 6 7 |
<style> body{ font-weight:600; } </style> |
Free-Learn
آموزش ویژگی Font-Variant در CSS
با استفاده از این ویژگی میتوان مشخص کرد که آیا متن ما به حروف بزرگ تبدیل شود یا خیر، یعنی در واقع با استفاده از این ویژگی میتوان متن یک عنصر را به حروف بزرگ تبدیل کرد.
از مقادیر زیر میتوان در این ویژگی استفاده کرد :
- normal : بصورت پیش فرض این گزینه می باشد
- small-caps
این ویژگی تمامی حروف کوچک یک متن را به حروف بزرگ تبدیل میکند ولی حروف بزرگ موجود در متن را یکمی بزرگتر نسبت به بقیه حروف نمایش میدهد.
مثال :
|
1 2 3 4 5 6 7 |
<style> body{ font-variant:small-caps; } </style> |
Free-Learn
خب دوستان خسته نباشید، به پایان این بخش ( آموزش کار با فونت ها یا Fonts در CSS ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.
