طراحی وب سایت در کرج
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;
}

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

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

پست مرتبط
مزایای CSS
مزایای CSS

مانند بسیاری از طراحان وب دیگر، من شروع به ساخت صفحات وب با استفاده از ابزارهای گرافیکی کردم و شگفتی های جداول را برای طرح کشف کردم بدون آنکه کسی به من بگوید که از آنها استفاده کند. از آنجا که مرورگر پشتیبانی از CSS بهتر از آن است که مورد استفاده قرار گرفته است، […]

ادامه مطلب
css
فواید css و آنچه باید درباره آن بدانید

وقتی وب سایت های اینترنتی شروع به ارائه محتوا کردند، همیشه روی صفحه نمایش کامپیوتر بود. سپس می توان یک کد HTML ایجاد کرد که محتویات آن را شامل می شود که شامل کد هایی است که از ویژگی های صفحه نمایش مراقبت می کند.با مات همراه باشید تا فواید css را بررسی کنیم. بنابراین شما […]

ادامه مطلب
css | طراحی سایت در کرج | طراحی وب سایت در کرج |هلدینگ کیان تجارت فاوا
چگونگی ایجاد مقالات با کیفیت با Inline CSS

چگونگی ایجاد مقالات با کیفیت با Inline CSS وقتی یک مقاله بنویسید – یا هر صفحه وب برای آن موضوع – من دوست دارم از یک اسناد اولیه XHTML که می دانم حاوی کد معتبر است. من اسناد اولیه را به یک ویرایشگر متن کپی / جای گذاری می کنم، محتویات را بنویس، و سپس […]

ادامه مطلب

پاسخی بگذارید