آموزش طراحی وب

Font ها در CSS

در این جلسه ی آموزشی راجع به font ها در CSS بصورت مفصل صحبت می کنیم .

CSS

فصل چهارم : Properties در CSS

جلسه ششم  : Font ها در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان در جلسه ی پیش Border در CSS رو به همراه اشکال هندسی قابل ترسیم با Border آموزش دادیم . در این جلسه ی آموزشی راجع به  font ها در CSS بصورت مفصل صحبت می کنیم .

 

فونت ها در وب

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

 

ساختار اصلی Font ها در CSS

بصورت استاندارد ما بصورت خلاصه نویسی از این خاصیت استفاده می کنیم :

Font : font-style font-variant font-weight font-size/line-height font-family

نمونه : Font : italic normal bold 12px/22px Tahoma

نمونه ساده و کاربردی : Font : ۱۲px/22px Tahoma

 

font-style

Font-Style شامل مقادیر زیر میشه :

normal : استایل پیشفرض مرورگر رو برای فونت در نظر میگیره که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

Italic : در صورتی که این مقدار رو قرار بدید ، استایل فونت به شکل کج لحاظ میشه .

Oblique : این مقدار هم مانند italic عمل میکنه .

Initial : استایل پیشفرض مرورگر رو لحاظ میکنه که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

Inherit : در صورتی که برای عنصر فرزند این مقدار رو لحاظ کنید ، استایل فونت عنصر والد رو به خودش اختصاص میده .

 

font-variant

Font-Variant برای متون لاتین به کار میره که شامل مقادیر زیر میشه :

normal : استایل پیشفرض مرورگر رو برای فونت در نظر میگیره که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

small-caps : تمامی حروف رو به بزرگ تبدیل میکنه و نمایش میده .

Initial : استایل پیشفرض مرورگر رو لحاظ میکنه که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

Inherit : در صورتی که برای عنصر فرزند این مقدار رو لحاظ کنید ، Font-Variant فونت عنصر والد رو به خودش اختصاص میده .

 

font-weight

Font-Weight شامل مقادیر زیر میشه :

normal : استایل پیشفرض مرورگر رو برای فونت در نظر میگیره .

Bold : متون رو با یک برابر ضخامت بیشتر نمایش میده .

Bolder : شبیه به Bold عمل میکنه .

Lighter : متون رو با ضخامت پیشفرض نمایش میده .

Initial : استایل پیشفرض مرورگر رو لحاظ میکنه که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

Inherit : در صورتی که برای عنصر فرزند این مقدار رو لحاظ کنید ، Font-Weight فونت عنصر والد رو به خودش اختصاص میده .

۱۰۰ , ۲۰۰ , ۳۰۰ , ۴۰۰ , ۵۰۰ , ۶۰۰ , ۷۰۰ , ۸۰۰ , ۹۰۰ : تا ۴۰۰ استایل همانند normal عمل میکنه از ۴۰۰ به بعد متون رو Bold نمایش میده .

 

font-size

font-size شامل مقادیر زیر میشه که کاربرد زیادی نداره و بصورت عموم از px و em استفاده میشه :

xx-small : سه برابر کوچکتر از اندازه پیشفرض فونت رو نمایش میده .

x-small : دو برابر کوچکتر از اندازه پیشفرض فونت رو نمایش میده .

Small : یک برابر کوچکتر از اندازه پیشفرض فونت رو نمایش میده .

Medium : بصورت مدیوم و نصف اندازه پیشفرض فونت رو نمایش میده .

Large : یک برابر بزرگ تر از اندازه پیشفرض فونت رو نمایش میده .

x-large : دو برابر بزرگ تر از اندازه پیشفرض فونت رو نمایش میده .

xx-large : سه برابر بزرگ تر از اندازه پیشفرض فونت رو نمایش میده .

Smaller : با اندازه مابین x-small و  xx-small فونت رو نمایش میده .

Larger : با اندازه مابین x-large و  xx-large فونت رو نمایش میده .

Px : با واحد پیکسل فونت رو نمایش میده . در صفحات وب در صورتی که از Tahoma استفاده کنید فونت استاندارد ۱۲px هست.

% : با واحد درصد فونت رو نمایش میده .

Initial : استایل پیشفرض مرورگر رو لحاظ میکنه که درج این مقدار هیچ تاثیری نداره پس لحاظ کردنش معنایی نداره .

Inherit : در صورتی که برای عنصر فرزند این مقدار رو لحاظ کنید ، font-size فونت عنصر والد رو به خودش اختصاص میده .

 

line-height

توسط line-height میتونید فاصله ی بین خطوط رو تعیین کنید که شامل مقادیر زیر میشه :

length : با واحد های px , pt , cm , em میتونید فاصله ی بین خطوط رو تعیین کنید . عموما از px و  em استفاده میشه .

Initial : استایل پیشفرض مرورگر رو لحاظ میکنه .

Inherit : در صورتی که برای عنصر فرزند این مقدار رو لحاظ کنید ، line-height فونت عنصر والد رو به خودش اختصاص میده .

 

نکته : در صورتی که لازم باشه شما میتونید از این خاصیت ها بصورت جداگانه استفاده کنید ، به عنوان مثال یک صفحه وب دارید که از پیش استایل font: 16px/25px tahoma رو برای متون لحاظ کرده ، و شما میخواین اندازه فونت رو تغییر بدید ، در این صورت با خاصیت font-size این کار رو انجام میدید .

 

افزودن فونت های دلخواه به صفحه وب

گاهی اوقات شما قصد دارید فونت های دلخواه فارسی خودتون رو به صفحه ی وبتون اضافه کنید . به عنوان مثال از فونت Byekan برای متون صفحات استفاده کنید . برای این منظور باید ابتدا فونت وب های Byekan رو به فایل css تون اضافه کنید و سپس برای متون اون رو لحظا کنید .

 

نحوه ی افزودن فونت های دلخواه در CSS

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

پس از اینکه فایل رو دانلود کردید ، فونت مورد نظر رو انتخاب کنید و از پوشه ی fonts کپی کنید و در پوشه ی خودتون paste کنید . ما Byekan رو برای مثال در نظر میگیریم . همانند کد زیر ، فونت مورد نظرتون رو در ابتدای فایل css فراخوانی کنید :

و توسط کد زیر این فونت رو به عنصر مورد نظرتون اختصاص بدید :

به همین راحتی 🙂

البته باید دقت داشته باشید که برای فونت های فارسی نمیتونید هر سایزی رو انتخاب کنید ، به عنوان مثال سایزهای استاندارد برای Byekan اندازه های ۱۳px , 16px , 18px , 22px و … هست .

 

تعیین رنگ برای فونت ها

برای تعیین رنگ مورد نظر برای فونت ها از خاصیت Color استفاده می کنیم . به عنوان مثال اگر بخوایم از رنگ مشکی برای فونت  استفاده کنیم میتونیم به اشکال زیر این کارو انجام بدیم :

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

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۱۳

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین