میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

فونت Font در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش فونت Font در CSS با من همراه باشید.

ویژگی های مربوط به فونت در CSS در واقع نوع قلم، ضخامت، اندازه و نوع نمایش یک متن را مشخص می کنند.

در CSS برای مشخص کردن قلم دو راه وجود دارد:

  1. generic family: یک گروه از Fontهایی که شبیه یکدیگرند (مانند Serif,Monospase)
  2. font family: در این روش باید نام یک Font را مشخص کنیم (مانند Tahoma,Arial)

در جدول زیر بعضی از فونت های عمومی لیست شده است:

  • font-family : برای تنظیم نوع فونت یا خانواده فونت
  • font-style : برای تنظیم استایل یا حالت نمایشی فونت
  • font-size : برای تنظیم اندازه فونت
  • font-weight : برای تنظیم وزن فونت
  • font-variant : برای تبدیل کردن متن

 


ویژگی Font-Family در CSS

با استفاده از این ویژگی می توان نوع فونت یک صفحه وب را مشخص کرد، در واقع نوع فونت یا خانواده فونت یک عنصر را با استفاده از این ویژگی می توان مشخص کرد.

+ فونت های پیش فرض

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

و تعدادی فونت هم هستند که بصورت عمومی توسط مرورگرهای اینترنتی پشتیبانی می شوند، یعنی در واقع این فونت های عمومی برای مرورگرها تعریف شده هستند و اکثر مرورگرها این فونت هارو پشتیبانی می کنند.

حال اگر ما در صفحه وب از هیچ فونت سفارشی ( مثلا فونت مورد علاقه خودمان  ) استفاده نکنیم ،فونت های پیش فرض یا عمومی که اشاره کردیم به کاربر نمایش داده می شود.

از فونت های پیش فرض یک سیستم و فونت های عمومی می تونیم موارد زیر رو نام ببریم :

  • Serif
  • Sans-serif
  • Fantasy
  • Times New Roman
  • Arial
  • Comic Sans MS
  • Impact
  • Tahoma
  • Verdana
  • Monospace

+ فونت جایگزین

فونت جایگزین !؟ یعنی اینکه ما وقتی داریم برای صفحه وبمان فونت مشخص می کنیم یک یا چندین فونت هم بصورت جایگزین براش تعریف کنیم تا اگه مثلا فونت اولی به هردلیلی نمایش داده نشد، فونت های جایگزین نمایش داده بشوند.

خب ممکنه اصلا اون فونتی که ما تعریف کردیم به هردلیلی فراخوانی نشد و حالا هر دلیل دیگه ، در نتیجه ما برای محکم کاری چنتا فونت دیگه بصورت جایگزین تعریف می کنیم.

تا اگه مثلا فونت اولی فراخوانی نشد فونت دومی فراخوانی و نمایش داده شود و حالا اگه مثلا فونت دومی هم فراخوانی نشد فونت سومی و همینجور تا بی نهایت..

شکل کلی برای تعریف و استفاده از ویژگی font-family و همچنین تعریف فونت های جایگزین :

پس فونت اولی میشه فونت اصلی ما، اگه به هر دلیلی فونت شماره ۱ نمایش داده نشد فونت های بعدی جایگزین میشن و همینطور تا ادامه.

نکته در مورد فونت های چند کلمه ای

اصلا یعنی چه فونت های چند کلمه ای؟ فونتی که اسمش چند کلمه باشه و لازم باشه بین کلمات فاصله گذاشته شه میشه فونت چند کلمه ای، مثل :

خب ! این فونت هارو باید درون دابل کوتیشن گذاشت ، یعنی درون ” “ .

 

body{
 font-family: "Times New Roman", tahoma, serif;
}

 


 

ویژگی Font-Style در CSS

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

میتوان از مقادیر زیر استفاده نمود :

  1. normal: متن به صورت معمولی نمایش داده می شود.
  2. italic: متن به صورت مورب نمایش داده می شود.
  3. oblique: خیلی شبیه italic است، اما کمتر پشتیبانی می شود.

 

body{
 font-style:italic;
}

 


ویژگی Font-Size در CSS

همونطور که از اسم این ویژگی مشخصه با استفاده از آن می توان اندازه فونت یک عنصر را مشخص و یا بطور کلی تعریف کرد.

 

body{
 font-size:20px;
}

 


ویژگی Font-Weight در CSS

با استفاده از این ویژگی می توان وزن یک فونت را مشخص کرد، یعنی در واقع میزان نازکی و کلفت بودن یک فونت میشه وزنش که ما با استفاده از این ویژگی می توانیم آن را تنظیم نماییم.

ما اگه بخوایم یک فونت را در وزن های مختلفی نشان بدهیم ، باید حتما خوده اون فونت در وزن های مختلف وجود داشته باشه، به همین خاطر هر فونتی رو نمیشه وزنش رو تغییر داد.

این ویژگی مقادیر زیر رو میتونه بپذیره :

  • normal : بصورت پیش فرض این گزینه است
  • bold : کلفت یا پررنگ
  • bolder : کمی کلفت تر یا پررنگ تر
  • lighter : فونت در وزن لاغر
  • ۱۰۰ – ۹۰۰ : وزن فونت را بصورت عددی میتوان مشخص کرد

مثال : استفاده از حالت عددی (از ۱۰۰ شروع میشه و لاغر است و تا ۹۰۰ همینجور هی چاق میشه)

 

body{
 font-weight:600;
}

 


ویژگی Font-Variant در CSS

با استفاده از این ویژگی می توان مشخص کرد که آیا متن ما به حروف بزرگ تبدیل شود یا خیر، یعنی در واقع با استفاده از این ویژگی می توان متن یک عنصر را به حروف بزرگ تبدیل کرد.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

  • normal : بصورت پیش فرض این گزینه می باشد
  • small-caps

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

مثال :


امیدواریم آموزش فونت Font در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssافزودن فونت در cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfاندازه فونت در cssانواع فونت در cssتعریف فونت در cssتگ فونت در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهرنگ فونت در cssساختار دستورات CSSسی اس اسفارسی w3schoolsفراخوانی فونت در cssفونت Font در CSSفونت برای cssفونت در cssفونت فارسی در cssکتاب آموزش css فارسینصب فونت در css
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟