سایر استایل‌های مربوط به فونت

مقدمه

در درس قبل با موارد و نکاتی در ارتباط با فرمت و انواع فونت‌های وب آشنا شدیم و دیدیم که چطور می‌توانیم با استفاده از یک پراپرتی به نام font-family فونت پیش‌فرض متن یک عنصر را تغییر دهیم. به علاوه، دیدیم که چطور می‌توانیم با استفاده از یک at-rule به نام @font-face ترتیبی دهیم که از فونت دلخواه ما بدون در نظر گرفتن اینکه آن فونت روی سیستم کاربر وجود دارد یا خیر، استفاده شود. در این درس، به معرفی و بررسی سایر ویژگی‌های مربوط به فونت متون مانند سایز و رنگ و پراپرتی‌های مرتبط با این ویژگی‌ها خواهیم پرداخت.

تعیین سایز فونت

در حالت پیش‌فرض، هر عنصر، سایز فونت خود را از عنصر والدش دریافت می‌کند. اما این رفتار پیش‌فرض را می‌توان با استفاده از پراپرتی font-size تغییر داد. در واقع، پراپرتی font-size سایز فوتت به‌ارث‌رسیده به یک عنصر را لغو (override) کرده و مقدار دیگری به آن اختصاص می‌دهد.

مقدار پراپرتی font-size را می‌توان با استفاده از واحدهای طولی مانند em، rem، vw، px و سایر واحدهای طولی و یا با استفاده از واحد درصد تعیین کرد. به علاوه، از مجموعه‌ای از کلمات کلیدی از xx-small تا xxx-large نیزمی‌توان به عنوان مقدار این پراپرتی استفاده کرد.

رایج‌ترین واحدهایی که برای تعیین سایز فونت استفاده می‌شوند، واحدهای em و rem هستند. یادآوری می‌کنم که هنگام استفاده از واحد em باید مراقب ماهیت سلسله‌مراتبی آن باشیم. برای روشن شدن موضوع، به مثال زیر نگاه کنید.

CSS

.parent{
  font-size: 1.5em;
}

.child{
  font-size: 1.5em;
}

در اینجا عنصر والد و فرزند هر دو دارای سایز فونت 1.5em هستند اما اگر این کد را اجرا کنید، خواهید دید که سایز فونت عنصر فرزند بزرگتر است. ماجرا از این قرار است که سایز فونت عنصر والد برابر با 1.5em یعنی 1.5 برابر سایزفونت عنصر والدش یعنی عنصر html است که برابر با 16px است. بتابراین، سایز فونت عنصر والد برابر با 24px خواهد بود. اما مقدار 1.5em برای عنصر فرزند معادل 1.5 برابر والدش یعنی 24px است که برابر با 36px خواهد شد.

قبلاً هم گفتیم که اگر به‌جای em از rem استفاده کنیم، با چنین دشواری‌هایی مواجه نخواهیم بود.

تعیین رنگ متن

برای تعیین رنگ متن عناصر می‌توانیم از پراپرتی color استفاده کنیم. مقدار پیش‌فرض این پراپرتی برابر با inherit است که باعث می‌شود که رنگ متن از عنصر والد دریافت شود. در مثال زیر، از روش‌های مختلف تعیین رنگ برای تغییر رنگ پیش‌فرض عناصر h1 و p استفاده شده است.

CSS

p{
  color: red;
}

h1{
  color: #b200ff;
}

پراپرتی font-style

از پراپرتی font-style می‌توانیم برای نمایش متن به صورت مورب یا ایتالیک استفاده کنیم. این پراپرتی می‌تواند یکی از مقادیر normal، italic و oblique را دریافت کند. تأثیر استفاده از مقادیر italic و oblique یکسان به نظر می‌رسد اما در واقع، این دو قدری با هم متفاوتند. Italic معمولاً یک فونت زاویه‌دار است که گاهی اوقات طراحی کاملاً متفاوتی نسبت به ورژن نرمال دارد. اما oblique معمولاً همان ورژن نرمال است که کمی مایل شده است. البته همه‌ی فونت‌ها دارای ورژن‌های italic و oblique نیستند و در این موارد، هر دو یکسان به نظر می‌رسند.

CSS

p{
  font-style: italic;
}

پراپرتی font-variant

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

CSS

p{
  font-variant: small-caps;
}

پراپرتی font-weight

از پراپرتی font-weight برای تعیین ضخامت فونت استفاده می‌شود. مقدار این پراپرتی می‌تواند normal یا bold باشد اما امکان استفاده از مقادیر عددی 100، 200 تا 900 هم وجود دارد. مقدار normal معادل مقدار عددی 400 و مقدار bold معادل 700 است. به علاوه، امکان استفاده از مقادیر bolder و lighter هم وجود دارد که این مقادیر نسبت به عنصر والد سنجیده می‌شوند.

CSS

p{
  font-weight: bold;
}

پراپرتی text-transform

برای کنترل بزرگی یا کوچکی حروف متن از یک پراپرتی با نام text-transform استفاده می‌شود. این پراپرتی می‌تواند یکی از مقادیر زیر را دریافت کند:

• مقدار none: برای لغو تأثیر استفاده از این پراپرتی.
• مقدار uppercase: باعث می‌شود که متن با استفاده از حروف بزرگ نمایش داده شود.
• مقدار lowercase: باعث می‌شود که متن با استفاده از حروف کوچک نمایش داده شود.
• مقدار capitalize: باعث می‌شود که حرف اول هر کلمه بزرگ و مابقی حروف به صورت کوچک نمایش داده شوند.

توجه داشته باشید که مقدار این پراپرتی از والد به فرزندان به ارث می‌رسد اما چون مقدار اولیه‌ی none برای آن در نظر گرفته شده، به طور پیش‌فرض چنین اتفاقی رخ نمی‌دهد.

CSS

h1{
  text-transform: uppercase;
}

p{
  text-transform: capitalize;
}

پراپرتی text-decoration

از پراپرتی text-decoration برای افزودن خطوط تزئینی به متن استفاده می‌شود. این خطوط تزئینی شامل زیرخط‌ها (underlines)، خطوطی که روی متن کشیده می‌شوند (strikethrough lines) و حتی خطوط موجی (wavy lines) می‌شود.

پراپرتی text-decoration در مرسوم‌ترین حالات، یکی از مقادیر none، underline یا line-through را دریافت می‌کند. تأثیر استفاده از این مقادیر را می‌توانید در مثال زیر ببینید:.

CSS

.underline{
  text-decoration: underline;
}

.strikethrough{
  text-decoration: line-through;
}

.none{
  text-decoration: none;
}

پراپرتی text-decoration می‌تواند یک رنگ و یک استایل را هم تنظیم کند. استایل‌های ممکن عبارتند از: solid، double، dotted، dashed و wavy. مثال زیر را ببینید.

CSS

.solid{
  text-decoration: underline solid blue;
}

بعضی از عاصر مانند لینک‌ها در حالت پیش‌فرض، زیرخط‌دار هستند. زیرخط این عناصر را می‌‌توان با تخصیص مقدار none به پراپرتی text-decoration حذف کرد.