آموزش CSS

آموزش CSS - فونت

خصوصیت Font در CSS به شما اجازه می دهد سبک های مختلف هر فونت همچون خانواده فونت، اندازه، بولد بودن آن، متغیرها و سایر موارد را برای یک متن تعیین کنید.

خصوصیت Font:

زبان برنامه نویسی CSS خصوصیت های متعددی را برای سبک دهی فونت های استفاده شده در محتوای متنی فراهم می کند. این خصوصیت ها عبارتند از :

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size

در این بخش از سری آموزش های زبان برنامه نویسی CSS، هر کدام از خصوصیت های مرتبط با فونت را بررسی خواهیم کرد. پس همراه ما باشید.

خصوصیت Font Family:

خصوصیت خانواده های فونت(font-family ) در CSS، به شما اجازه می دهد لیست اولویتی از نام خانواده فونت و/یا نام خانواده عمومی را برای محتوای متنی یک المان انتخاب شده تنظیم نمایید. خصوصیت خانواده های فونت می تواند چندین نام فونت را به عنوان سیستم fallback در خود نگه دارد. ابتدا فونت هایی که دوست دارید در متن خود از آن ها استفاده کنید را لیست نمایید و سپس به دنبال فونت های جایگزین برای فونت هایی باشید که در دسترس خود ندارید. باید لیست خود را با خانواده فونت عمومی به پایان ببرید. به خاطر داشته باشید که خانواده فونت عمومی در برگیرنده موارد زیر است:

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

اعلان خانواده فونت شبیه کد زیر خواهد بود:

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

نکته: اگر نام خانواده فونت متشکل از چندین حرف باشد، باید آن را داخل علامت نقل قول قرار دهید. مثلا "Times New Roman" ، "Courier New"

سبک فونت(Font Style):

خصوصیت Font Style سبک فونت را برای محتوای متنی یک المان تعیین می کند. مقادیر محتمل برای این خصوصیت شامل نرمال، ایتالیک یا oblique است.

p.one {
    font-style: normal;
}
p.two {
    font-style: italic;
}
p.three {
    font-style: oblique;
}

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

اندازه فونت(Font Size):

همانطور که از نامش پیداست این خصوصیت اندازه فونت برای محتوای متنی یک المان را تعیین می کند. شما می توانید اندازه فونت را به روش های مختلفی همچون کلمات کلیدی، پیکسل ها یا em مشخص کنید.

تنظیم فونت به کمک کلمات کلیدی:

با تنظیم اندازه فونت به کمک کلمات کلیدی، می توانید اندازه فونت مرتبط را در هر جایی از صفحه تنظیم کنید و همین امر به شما کمک می کند اندازه فونت را به راحتی در کل صفحات تغییر دهید. اندازه مطلق به کمک یکی از کلمات کلیدی زیر تعیین می شود:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

به مثال زیر توجه کنید:

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

تنظیم اندازه فونت به کمک پیکسل ها:

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

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

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

نکته: متن را می توان در همه مرورگرها به کمک ابزار zoom اندازه بندی کرد. با اینحال، چنین قابلیتی کل صفحه را تغییر می دهد و تنها بر روی متن اعمال نمی شود.

تنظیم اندازه فونت به کمک Em:

واحد em به اندازه فونت المان والد اشاره دارد. اندازه یک مقدار em پویاست. اگر اندازه فونت به درستی تعریف شود، em معادل اندازه فونتی خواهد بود که به والد آن المان اعمال شده است. به عنوان مثال اگر اندازه فونت را برای المان bodyبر روی 20 پیکسل تنظیم کرده باشید، پس :

1em = 20px و 2em = 40px.

اگر اندازه فونت را در هیچ کجای صفحه تنظیم نکرده باشید، مرورگر به صورت پیش فرض آن را بر روی 16 پیکسل تنظیم می کند. بنابراین به طور پیش فرض یک Em معادل 16 پیکسل است.

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

هشدار: در نسخه های IE6 و IE7 زمانی که می خواهیم اندازه متن را کوچک تر از قبل تنظیم کنیم بیش از حد کوچک می شود و به هنگام بزرگنمایی نیز با همین مشکل مواجه می شویم.

استفاده ترکیبی از درصد و Em:

برای اینکه بتوانید در همه مرورگرها به نتایج یکسان و مشابهی دست پیدا کنید بهتر است اندازه فونت پیش فرض را برای المان Body به صورت درصد تنظیم نمایید. تکنیک محبوب تنظیم اندازه فونت Body بر روی 62.5 درصد است که معادل 0.625em خواهد بود. مثال زیر این موضوع را به خوبی نشان می دهد:

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.6em;    /* 1.6em = 16px */
}

خصوصیت Font Weight:

خصوصیت Font Weight میزان بولد بودن( توپر بودن) فونت را مشخص می کند. مقادیر محتمل برای خصوصیت font-style در برگیرنده موارد زیر است:

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • موروثی

به خاطر داشته باشید که مقادیر عددی 100 تا 900، توپر بودن فونت را مشخص می کنند که در آن عدد نمایش داده شده از عدد پیشین خود تیره تر است.

  • مقادیر bolder و lighter به مقدار موروثی مرتبط هستند. این در حالیست که سایر مقادیر font weight مطلق می باشند.
p {
    font-weight: bold;
}

از آنجایی که میزان توپر بودن فونت ها محدود است، اغلب می توان از گزینه های normal و bold استفاده کرد. اگر فونت در weight مشخص شده وجود نداشته باشد، مقدار جایگزینی که به آن نزدیک تر است انتخاب می شود.

خصوصیت font-variant :

خصوصیت font-variant باعث می شود متن با small-caps variation نمایش داده شود. حروف کوچک با حروف معمولی فرق دارند. مقادیری که می توان برای تعیین خصوصیت font-variant مورد استفاده قرار داد شامل موارد زیر است:

  • normal( طبیعی)
  • small-caps( حروف کوچک)
  • inherit( موروثی)
p {
    font-variant: small-caps;
}
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...