جلسه ۲۹ – وزن و استایل فونت ها

تغییرات در نمایش فونت ها در CSS

وزن و استایل فونت ها در CSS
وزن و استایل فونت ها در CSS

چگونه می‌توانیم استایل فونت ها را مشخص کنیم؟ نحوه مشخص کردن وزن فونت ها در CSS چگونه است ؟ منظور از Font-weight چیست؟ منظور از Font-size چیست؟ تو این مقاله، چند خاصیت کاربردی دیگه از فونت ها رو یاد می‌گیریم.

خاصیت font-style

در مقاله قبل در رابطه با نحوه فراخوانی فونت ها در CSS صحبت کردیم. حالا زمان معرفی خاصیت های فونت هاست. توسط خاصیت Font-style ، می‌تونیم متن رو به حالت های خاصی ببریم. مقادیری که مورد قبول این خاصیت هستن عبارتند از:

  • oblique
  • italic
  • normal

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

کد HTML:

<div>Hello everyone !</div>

oblique: متن رو مستقیما زاویه دار می‌کنه.

کد CSS:

div{
   font-style: oblique ;
}

نتیجه:

نمایش زاویه دار متن

italic: کارش دقیقا شبیه به oblique هست. با این تفاوت که می‌تونه تو بعضی از فونت ها، به فرم هنری تری هم نوشته بشه.

کد CSS:

div{
   font-style: italic ;
}

نتیجه:

نمایش ایتالیک - نمایش italic

normal: تغییری در استایل فونت ایجاد نمی‌کنه.

خاصیت font-size

ما در مقاله طول و عرض در CSS میزفا یاد گرفتیم، اندازه ی متن رو با خاصیت های height یا width نمی‌شه تغییر داد و ما ناچاریم از خاصیت های دیگه‌ای استفاده کنیم.

توسط خاصیت font-size، می‌تونیم سایز متن مورد نظر خودمون رو تغییر بدیم.

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

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

واحد px

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

واحد pt

این واحد، بر حسب point یا نقطه مقدار دهی می‌شه. شباهت بسیاری به واحد px داره و همیشه، سایز فونت رو ثابت نگه می‌داره.

واحد em

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

برای مثال، فرض کنید سایز فونت در صفحه، ۱۶ پیکسل هست. اگه ما از کد زیر، برای یک متن دلخواه استفاده کنیم:

p{
   font-size: 3em;
}

سایز متنی که درون تگ p قرار داره، برابر با ۴۸ پیکسل می‌شه. به طور خلاصه، واحد em مشخص می‌کنه که اندازه متن ما چند برابر سایز فونت پیش فرض در صفحه می‌شه.

واحد درصد یا ٪

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

بنابراین، اندازه هایی که بر حسب درصد نوشته می‌شن، به شکل درصدی از اندازه فونت پیش فرض صفحه عمل می‌کنن.

کد CSS:

p{
   font-size: 50%;
}

در کد بالا، سایز متن داخل عنصر پاراگراف، ۸ پیکسل خواهد بود.

واحد vw و vh

این دو واحد، مخفف عبارات viewport width و viewport height هستن.

برای مطالعه مفهوم viewport، می‌تونین به مقاله واکنش گرایی و ابعاد عناصر میزفا مراجعه کنین.

واحد vw به معنای یک درصد از viewport هست. برای درک بهتر به مثال زیر توجه کنین:

کد HTML:

<div></div>

کد CSS:

div{
   background-color: red;
   height: 20vh;
   width: 40vw;
}

نتیجه:

نمونه واحد vw و vh

همونطور که می‌بینید، این دو واحد شباهت بسیاری به واحد درصد دارن. تفاوتی که دارن اینه که اندازه عناصر در اینجا، ربطی به عنصر والد اون ها نداره و مستقیما به viewport یا صفحه ما مربوط می‌شه.

بنابراین عنصری با عرض ۳۰vw، با عرض عنصری که عنصر پدر نداره و عرض اون ۳۰٪ قرار داده شده، تفاوت نداره.

منتهی استفاده از این دو واحد، تو خاصیت font-size یخورده متفاوته. به مثال زیر توجه کنین:

کد HTML:

<p> Mizfa CSS </p>

کد CSS:

p{
   font-size: 10vw;
}

نتیجه:

نمونه واحد Viewportابهامی که پیش میاد، اینه که آیا واقعا عرض متن مورد نظر، تنها ۱۰درصد صفحست؟ چون خیلی بزرگ تر به نظر می‌رسه!

پاسخ به این ابهام، در نکته زیر خلاصه می‌شه:

در خاصیت font-size، واحد های vw و vh به حروف اختصاص داده می‌شن. یعنی اندازه 10vw مختص کل متن نیست. بلکه با توجه به تک تک  حروف سنجیده می‌شه.

خاصیت font-weight

کاری که انجام می‌ده، توی اسمش خلاصه شده، وزن فونت 🙂

مقادیر قابل قبول این خاصیت عبارتند از:

  • اعداد از ۱۰۰ تا ۹۰۰
  • bold
  • lighter
  • normal

اعداد متغیر از ۱۰۰ تا ۹۰۰ بدون واحد هستن، و وظیفه ضخیم کردن متن ما رو بر عهده دارن.

هرچی به ۹۰۰ نزدیک تر، ضخیم تر و هرچی به ۱۰۰ نزدیک تر، نرمال تر و طبیعی تر.

مقادیر دیگه هم کارایی کم و بیش یکسانی با مقادیر عددی دارن. تو شکل زیر می‌تونیم قضیه رو بهتر درک کنیم:

منظور از خاصیت font-weight چیست؟

نکته: تمامی فونت ها نمی‌تونن این مقادیر رو قبول کنن، پس اگه از فونت خاصی استفاده می‌کنید و مثلا می‌بینید وزن فونت lighter اثری روی نوشتتون نداره متعجب نشید.

خاصیت font-variant

این خاصیت، مقادیر زیر رو می‌پذیره:

  • normal
  • small caps

برای اینکه خوب کار این خاصیت رو متوجه بشیم، کافیه به مثال های زیر توجه کنیم:

کد HTML:

<p class="paragraph1"> Mizfa tutorial </p>
<p class="paragraph2">Mizfa tutorial </p>

کد CSS:

.paragraph1{
   font-variant: small-caps;
   font-size: 3em;
   font-family: sans-serif;
}

.paragraph2{
   font-variant: normal;
   font-size: 3em;
   font-family: sans-serif;
}

نتیجه:

منظور از font-variant چیست؟

نکته: مقدار small caps روی حروف بزرگ عمل نمی‌کنه.  همونطور که در مثال اول هم می‌بینید، حرف اول عبارت یعنی M مشمول تغییر نشده و به صورت طبیعی خودش باقی مونده.

بنابراین نتیجه می‌گیریم که اگه تمام بند رو با حروف بزرگ می‌نوشتیم، باید انتظار اینطور چیزی رو می‌داشتیم:

استفاده از Caps در فونت ها

اگه تو مطالب به ابهام و سوالی برخوردین، راحت باشین و اون رو تو قسمت نظرات مطرح کنین تا مشکل رو با هم برطرف کنیم 🙂

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

من اسم خودم رو با مطالب مقاله های مربوط به فونت نوشتم.

شما هم نتیجه زیر رو با نام خودتون بسازین و کد CSS اون رو در قسمت نظرات بنویسین:

پایانترم نوید معدن نژاد

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

تو این مقاله از css اموزش، با چند خاصیت باقی مونده از استایل دهی به متن آشنا شدیم و اون ها رو یاد گرفتیم.

خاصیت های مورد نظر عبارت بودن از:

  • font-size: سایز و ابعاد متن رو تعریف می‌کرد و مقادیر مورد قبول اون، از جنس اندازه بودن.
  • font-style: حالت های مختلفی از جمله italic به متن اختصاص می‌داد.
  • font-weight: وزن متن رو مشخص می‌کرد (همون نازک بودن یا کلفت بودن کلمات!).
  • font-variant: می‌تونست متن با حروف بزرگ رو در ابعاد کوچیک بنویسه.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

6 نظر

6 پاسخ

  1. div{
    text-transform: capitalize;
    text-align: center;
    font-size: 3vw;
    margin: 60px;
    text-decoration-style: double;
    text-decoration-line: underline;
    }

    samira abdi

    1. سلام خانم عبدی
      اکثر پاسخ های شما بررسی شد و امتیاز در حساب کاربری شما ثبت شد.

  2. سلام
    برای فایل html یه پاراگراف با ایدی Mizfa در نظر بگیرید و متنش هم Hossein Hamzeh باشه (از کد html عکس نگرفتم )

  3. .paragraph1{
    font-variant: small-caps;
    font-size: 3em;
    text-align: center;
    text-decoration-line: underline;
    text-decoration-style: double
    }

    Mehdi Naeimi

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=