طراحی وب سایت در کرج
026-34204893
09101013858

بایگانی برچسب‌ها : آموزش

آموزش CSS - تغییرات فونت در CSS - طراحی سایت در کرج شرکت کیان تجارت فاوا

آموزش CSS – تغییرات فونت در CSS

آموزش CSS – تغییرات فونت در CSSطراحی سایت در کرج شرکت کیان تجارت فاوا

 

تغییر فونت‌ها در CSS:

در قدم اول به هر یک از سه روشی که دوست داریم و مناسب‌تر به نظر می‌رسد المان مورد نظر را انتخاب می‌کنیم. مثلا ما در این مثال المان‌های پاراگراف دارای کلاس text را با اندازه فونت بزرگ نشان دهیم. برای این کار مرحله‌ی زیر را طی می‌کنیم.

  • نام:‌ font-size
  • این ویژگی چه کاری انجام می‌دهد؟‌  تغییر اندازه فونت
  • چه چیزهایی را در مقابلش بنویسیم؟  اندازه فونت بر اساس پیکسل یا em
  • نمونه نوشتن این دستور: font-size: 14px

مرحله‌ی اول: ابتدا نام کلاس مورد نظر را با یک نقطه . در پشت آن می‌نویسیم. بدین ترتیب تمامی المان‌هایی که دارای کلاس مورد نظر هستند(صرف نظر از نوع و خواص آن‌ها) گوش به زنگ فرامین و دستوراتی که می‌دهیم خواهند شد.

.p {

کروشه را باز و بسته  می‌کنیم و برای ایجاد فضای مناسب یک اینتر وارد می‌کنیم.

.p {

در مرحله‌ی بعد تغییرات مورد نظر را در بین کروشه می‌نویسیم. در اینجا ما قصد داریم تا اندازه‌ی پاراگراف را تغییر دهیم؛ پس از دستور :font-size استفاده کرده‌ایم. در اینجا باید مقدار فونت دلخواه را بر حسب پیکسل بیان کنیم. مثلا اینجا فونت ما ۱۸px است که اندازه‌ی متوسطی است. با آزمون و خطا می‌توانید مقدار اندازه‌ی فونت دلخواهتان را پیدا کنید.

HTML

<p class=”text”> این متن با فونت اندازه ۱۸ پیکسل است</p>

CSS

.text {
font-size: ۱۸px;
}

این متن با فونت اندازه۱۴ پیکسل است.

تغییر نوع فونت:

  • نام: font-family
  • این ویژگی چه کاری انجام می‌دهد؟‌ تغییر نوع فونت
  • چه چیزهایی را در مقابلش بنویسیم؟  نام فونت‌ دلخواه
  • نمونه نوشتن این ویژگی: font-family: tahoma

برای تغییر نوع فونت نیز در مرحله‌ی اول، المان مورد نظر را انتخاب می‌کنیم. سپس در بین کروشه دستور font-family را می‌نویسیم و در جلوی آن نام فونتی که قصد انتخاب آن را به عنوان فونت المان داریم انتخاب می‌کنیم. مثال زیر این کار را نشان می‌دهد.

HTML

<p> این متن با فونت تاهما نوشته می‌شود</p>

CSS

p {
font-family: “Times New Roman”, Times, serif;
}

این متن با فونت تاهما نوشته می‌شود

نکته: می‌توانیم چندین فونت را در جلوی font-family بنویسیم. بدین ترتیب در صورتی که اولین فونت‌ها در سیستم موجود نباشد، فونت بعدی استفاده خواهد شد.

 

حالت فونت:

برای تغییر استایل فونت نیز از دستور font-style استفاده می‌شود. این دستور در واقع فونت شما را به حالت italic، oblique و یا معمولی در می‌آورد.

  • نام: font-style
  • این ویژگی چه کاری انجام می‌دهد؟‌ تغییر حالت فونت
  • چه چیزهایی را در مقابلش بنویسیم؟ حالت مورد نظر مثل ایتالیک
  • نمونه نوشتن این ویژگی: font-style: normal|italic|oblique;

HTML

<p class= “normal”>متن با حالت معمولی و پیش فرض </p>

<p class=”italic”> متن با حالت ایتالیک </p>

CSS

p.normal {
font-style: normal;
}

p.italic {
font-style:  italic;
}

متن با حالت معمولی و پیش فرض

متن با حالت ایتالیک

Tagged