نمایش خبر

image

ویژگی font-size در css

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

font-size

اولین ویژگی که در این فصل با آن آشنا خواهید شد ویژگی font-size می باشد. بوسیله ویژگی font-size می توان اندازه فونت یک عنصر را مشخص کرد.برای تعیین اندازه فونت می توانیم از واحدهای نسبنی و مطلق استفاده کنیم.

نکته : ویژگی font-size جزو ویژگی هایی می باشد که توسط فرزند عناصر به ارث برده می شود بنابراین اندازه فونت هر عنصر برابر اندازه فونت پدرش خواهد بود مگر اینکه برای خود عنصر این ویژگی مستقیما تعیین شود.

اندازه دهی مطلق

همانطور که گفتیم برای تعیین اندازه یک فونت می توانیم از واحدهای مطلق استفاده کنیم.برای استفاده از این نوع مقداردهی می توانیم از واحدهای مطلق مانند pt , px و یا کلمات کلیدی که از قبل تعریف شده هستند استفاده کرد.در کد زیر نحوه استفاده از اندازه دهی مطلق را مشاهده می کنید:

font-size : 18px;
font-size : 10pt;
font-size : xx-small; /* خیلی خیلی کوچک */
font-size : x-small;  /* خیلی کوچک */
font-size : small; /* کوچک */
font-size : medium; /* متوسط */
font-size : large; /* بزرگ */
font-size : x-large; /* خیلی بزرگ */
font-size : xx-large; /* خیلی خیلی بزرگ */

اندازه دهی نسبی

استفاده از واحدهای نسبی برای اندازه دهی به این ویژگی بسیار رایج است و این روش بیشتر نیز توصیه می شود،برای این منظور می توانیم از واحدهایی مانند % ,em,rem استفاده کنیم اما واحد که رایج تری می باشد استفاده از واحد em می باشد.

استفاده از واحدهای نسبی باعث می شود که نگهداری و تغییر کدهای بسیار ساده تر شود،به عنوان مثال شما می توانید با تغییر سایز فونت عنصر body سایز فونت بقیه عناصر را نیز به همان نسبت تغییر دهید.

مثال هایی از نحوه استفاده از واحدهای نسبی را در کد زیر مشاهده می کنید :

font-size : 1em;
font-size : 2rem;
font-size : 120%;

همچنین دو کلمه کلیدی نیز وجود دارند که می توانیم از انها به منظور مقداردهی نسبی برای ویژگی font-size عناصر استفاده کنیم.این دو کلمه عبارتند از :

  • smaller
  • larger

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

برای آشنایی بیشتر با این ویژگی می توانید دموی زیر را بررسی کنید.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد. با ادامه آموزش های CSS با ما همراه باشید.

کامنی وجود ندارد.