در فصل اول مقالات مربوط به 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
عناصر استفاده کنیم.این دو کلمه عبارتند از :
این دو کلمه کلیدی که به معنای کوچک تر و بزرگتر هستند که نسبت به عنصر پدر محاسبه می شوند.
برای آشنایی بیشتر با این ویژگی می توانید دموی زیر را بررسی کنید.
امیدوارم مطالعه این مقاله برای شما مفید بوده باشد. با ادامه آموزش های CSS با ما همراه باشید.
کامنت جدید ...