سبد (0)

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

فونت در CSS

Wiki

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

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

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

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

Generic family Font family توضیحات
Serif Times New Roman
Georgia

 در پایان کاراکترهای این مجموعه از Fontها، یک خط کوچک وجود دارد
Sans-serif Arial
Verdana

در پایان کاراکترهای این مجموعه از Fontها، خطی وجود ندارد
Monospace Courier New
Lucida Console

تمام کاراکترهای این مجموعه، عرض یکسانی دارند

 تنظیم قلم یک متن

Wiki

خصوصیت font-family در واقع نوع قلم یک متن را تنظیم می کند.

این خصوصیت باید چندین نام را به عنوان یدکی در خود نگه دارد تا اگر مرورگر اولین font را پشتیبانی نکرد به سراغ بعدی برود. 

توجه: اگر نام یک font بیشتر از یک کلمه باشد باید آنرا در کوتیشن مارک قرار دهید، مانند: "Times New Roman"

برای لیست کردن fontها از جدا کننده کاما استفاده کنید:

مثال (فرمت دهی فونت در CSS)

p{font-family:"Times New Roman", Times, serif;}
خودتان امتحان کنید »

در مثال بالا اگر "Times New Roman" در کامپیوتر کاربر نصب شده باشد، به تگ <p> اختصاص داده خواهد شد و اگر نصب نباشد "Times" استفاده می شود و در نهایت اگر هیچکدام از Fontها موجود نباشد، مرورگر از بین مجموعه فونتهای serif یکی را اختصاص خواهد داد.

تنظیم نوع نمایش یک متن

Wiki

خصوصیت font-style اغلب برای مشخص کردن متن مورب یا italic استفاده می شود.

این خصوصیت دارای 3 مقدار زیر است:

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

مثال (فرمت دهی فونت در CSS)

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
خودتان امتحان کنید »

تنظیم اندازه یک متن

Wiki

خصوصیت font-size اندازه یک متن را تنظیم می کند.

توجه داشته باشید که مدیریت اندازه متن در وب بسیار مهم است، البته برای تنظیم اندازه متن عنوان ها(header)، استفاده از این خصوصیت مناسب نیست و باید از تگهای <h1> تا <h6> استفاده شود.

مقدار خصوصیت font-size می تواند نسبی یا مطلق باشد:

اندازه مطلق:

  • متن با یک اندازه مشخص تنظیم می شود.
  • اجازه تغییر اندازه متن در مرورگرها از کاربران گرفته می شود که البته دستیابی پذیری را پایین می آورد.
  • زمانی این روش موثر است که اندازه فیزیکی خروجی را بدانیم.

اندازه نسبی:

  • اندازه با توجه به عناصر احاطه کننده دیگر تنظیم می شود.
  • در این روش به کاربر اجازه داده می شود که در مرورگرها، اندازه متن را تغییر دهد.

نکته: اگر اندازه متن را مشخص نکنید، مقدار پیشفرض برای متن های معمولی مثل پاراگراف ها، 16 پیکسل خواهد بود(16px=1em)

تنظیم اندازه متن با واحد pixel

Wiki

تنظیم اندازه متن با واحد پیکسل، به شما اجازه می دهد تا کنترل بیشتری، روی اندازه متن عناصر داشته باشید:

مثال (فرمت دهی فونت در CSS)

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
خودتان امتحان کنید »

در مثال بالا اجازه تغییر اندازه متن در مرورگرهای Explorer 9, Firefox, Chrome, Opera, Safari داده می شود.

توجه: مثال بالا در نسخه های IE9 و قبلتر کار نخواهد کرد.

 در تمام مرورگرها با استفاده از ابزار zoom می توان اندازه متن را تغییر داد. (البته این تغییر اندازه، فقط مختص متن نیست و اندازه بقیه عناصر نیز تغییر می کند)

تنظیم اندازه متن با واحد Em

Wiki

برای اجتناب از مشکل تغییر اندازه متن، در نسخه های قدیمی IE، بیشتر توسعه دهندگان وب از em بجای pixel استفاده می کنند.

واحد اندازه em توسط W3C پیشنهاد شده است.

1em مساوی با اندازه متن جاری است. اندازه پیشفرض در تمام مرورگرها 16px است، بنابراین اندازه پیشفرض 1em مساوی با 16px است.

با استفاده از فرمول روبرو می توان pixel را به em تبدیل کرد.      pixels/16=em

مثال (فرمت دهی فونت در CSS)

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
خودتان امتحان کنید »

اندازه متن مثال بالا با مثال قبلی یکسان است، اما این مثال در تمام مرورگرها پشتیبانی می شود.

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

استفاده ترکیبی از واحد em و درصد

Wiki

راه حل نهایی که در تمام مرورگرها کار خواهد کرد این است که، یک اندازه پیشفرض به درصد، در تگ <body> تنظیم کنیم:

مثال (فرمت دهی فونت در CSS)

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
خودتان امتحان کنید »

حالا کدمان عالی کار خواهد کرد! در تمام مرورگرها اندازه متن یکسان خواهد بود و مرورگر اجازه می دهد، اندازه متن را تغییر دهیم.

مثال

مثال - خودتان امتحان کنید

Wiki

تنظیم خاصیت font-weight
این مثال نشان می دهد که چگونه ضخامت یک متن را تنظیم کنیم (Bold).

تنظیم خاصیت font-variant
این مثال نشان می دهد که چگونه برای متن های انگلیسی، حروف کوچک را به حروف بزرگ تبدیل کنیم البته در اندازه کوچک.

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

کلیه خصوصیات مربوط به متن در CSS

Wiki

خصوصیت توضیحات
font

همه ی ویژگی های مربوط به متن را در یک مرحله تنظیم می کند
font-family

Font یک متن را تنظیم می کند
font-size

اندازه یک متن را تنظیم می کند
font-style

Style یک متن را تنظیم می کند
font-variant

اگر با مقدار small-caps تنظیم شود حروف کوچک را در همان فضا به حروف بزرگ تبدیل می کند(حروف بزرگ در اندازه کوچک)
font-weight

ضخامت یک متن را مشخص می کند
نوشته شده توسط امیر پهلوان صادق
بازدید: 39320

آموزش صوتی CSS

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه