جلسه هشتم: فونت css – آشنایی با فونت در css

فونت css – آشنایی با فونت در css

خوش اومدین به هشتمین جلسه از دوره آموزش css . توی این جلسه قراره که در مورد فونت ها صحبت کنیم و ببینیم که css چه امکاناتی رو در خصوص انتخاب فونت در اختیار ما قرار میده. ما در جلسه قبل با ویژگی های زیادی آشنا شدیم که به ما این امکان رو میداد تا استایل متن در css رو تغییر بدیم. توی این جلسه هم با تغییر فونت در حقیقت شکل ظاهری متون رو تغییر میدیم. پس در حقیقت این جلسه هم بخشی از موضوع استایل متن در cssهست. خب پس بدون هیچ توضیح اضافه ای بریم و این جلسه رو شروع کنیم.

خانواده فونت ها

۵ خانواده فونت بصورت پیشفرض در css در اختیار ما هستند که هر کدام شامل چند فونت هستند. ما میتونیم از این فونتها به راحتی استفاده کنیم. این فونتها که برای حروف لاتین طراحی شدند از کاراکترهای غیرلاتین هم پشتیبانی میکنند و به همین دلیل میتونیم براحتی برای زبانهای دیگه مثل فارسی هم استفاده کنیم. این ۵ گروه رو در زیر ببینید:

در جدول بالا فونت هایی که در هر گروه قرار دارند رو میتونید ببینید. فونت های هر کدوم از این گروه ها برای جای خاصی مناسب هست.

اختصاص فونت به selectorها. فونت CSS

ما با استفاده از ویژگی font-family میتونیم نوع فونت خودمون رو تغییر بدیم. قطعه کد زیر رو ببینید:

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

همونطور که میبینید من با استفاده از ویژگی font-family سه فونت رو به ۳ کلاس خودم اختصاص دادم.

نکته مهم: اگر اسم یه فونت بیشتر از یه بخش بود و توی اسمش از فاصله استفاده شده بود مثل Times New Roman ما باید این مقدار رو داخل کوتیشن یا دابل کوتیشن قرار بدیم.

فونت های امن در CSS

هرچند فونتهای بالا معمولا روی سیستم عامل ها نصب هستند و ما میتونیم ازشون استفاده کنیم ولی هیچ وقت هیچ چیز کاملا امن نیست. شاید به هر دلیلی فونت مورد نظر ما روی سیستم عامل کاربر نصب نباشه. پس ما از فونتهای جایگزین استفاده میکنیم. و در زمان تعریف نام فونت، چند فونت جایگزین هم معرفی میکنیم که در صورت عدم وجود یک فونت از فونت بعدی استفاده بشه. همانطور که توی قطعه کد بالا میبینید من در هر بار استفاده از ویژگی font-family سه فونت رو به اون selector اختصاص دادم. ما باید در طراحی صفحات وب و هنگام استفاده فونت css این قاعده رو رعایت کنیم.

ویژگی font-style

ویژگی font-styleبه ما این امکان رو میده که متون خودمون رو خمیده کنیم. مقدار پیشفرض این ویژگی normal هست. ما با مقداردهی italic و oblique میتونیم متون خودمون رو مورب کنیم. تصویر زیر رو ببینید:

همونطور که میبینید نوشته هایی که مقدار italic و oblique رو برای ویژگی font-style اونها تعریف کردیم بصورت مورب نمایش داده شدند.

ویژگی font-size

ما با استفاده از ویژگی font-size میتونیم اندازه قلم رو تغییر بدیم. برای تگ پاراگراف مقدار پیشفرض 16px یا 1em برای این ویژگی هست. ما میتونیم به راحتی این مقدار رو برای هر selector تغییر بدیم. تصویر زیر رو ببینید:

استفاده از فونت های گوگل به عنوان فونت css

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

تصویر زیر رو ببینید:

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

در مورد فونت گوگل در ویدیو توضیحات کاملتری رو گفتم. اگه علاقمند هستید، پیشنهاد میکنم ویدیو این درس رو از دست ندید.

ویژگی font

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

نمونه کد زیر رو ببینید:

p.a {
  font: 20px Arial, sans-serif;
}

همینطور که میبینید من همزمان اندازه قلم و نوع قلم رو با استفاده از ویژگی font مقداردهی کردم.

همه ویدیوهای دوره آموزش CSS