تنظیمات فونت در CSS

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

نحوه استفاده

برای نوشته های موجود در صفحات وب می توان تنظیمات زیر را اعمال نمود:

  • color: رنگ نوشته.
  • font-family: نوع فونت.
  • font-size: اندازه نوشته.
  • font-style: استایل نوشته که مقدار آن می تواند italic باشد.
  • font-weight: وزن نوشته که مقدار آن می تواند بین 100 تا 900 بوده و اگر قصد داشته باشید نوشته شما bold شود، می توانید مقدار bold را به آن اختصاص دهید.
  • text-decoration: دو مقدار پر استفاده برای این خاصیت none و underline می باشد که اولی باعث حذف خط زیر نوشته شده و دومی متن را زیر خط دار می کند.

مثال:

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      body {
        direction: rtl;
        text-align: justify;
      }
      div{
        width: 400px;
        height: auto;
        background-color: lightgray;
        margin: 10px auto;
        border: 1px solid black;
        padding: 10px 15px;
        font-family: Tahoma;
        font-size: 14px;
        font-weight: 600;
        color: purple;
      }
    </style>
  </head>
  <body>
    <div>
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
    </div>
  </body>
</html>

واحدهای قابل استفاده برای font-size

اندازه نوشته های موجود در صفحات وب با واحد های مختلفی قابل تنظیم می باشند.

  • cm: سانتی متر.
  • mm: میلی متر.
  • in: اینچ.
  • px: پیکسل. هر پیکسل معادل 1/96 اینچ می باشد.
  • pt: پوینت. هر پوینت معادل 1/72 اینچ می باشد.
  • pc: پیکاس. هر پیکاس معادل 12 پوینت می باشد.
  • em: این واحد، یک واحد نسبی بوده و اندازه نوشته را نسبت به اندازه فعلی تنظیم می نماید، برای مثال 2em به معنی 2 برابر اندازه فعلی می باشد.
  • rem: این واحد نیز همانند em یک واحد نسبی بوده و اندازه نوشته را نسبت به اندازه body یا html تعیین می نماید.

مثال:

body {
  direction: rtl;
  text-align: justify;
  font-size: 12px;
}
div{
  font-size: 1.5em;
}

در این مثال اندازه نوشته در body معادل 12px تعیین شده است، در صورتیکه برای div اندازه نوشته تعیین نشود، همان مقدار 12 را از body به ارث خواهد برد، و اگر مانند دستورات فوق مقدار 1.5em را برای div تعیین کرده باشیم، اندازه نوشته های آن 1.5 برابر 12، یعنی معادل px18 خواهد بود.