Font Style and Font Variant

Font Style and Font Variant అంటే ఏమిటి?

CSS లో font-style property ద్వారా text సాధారణంగా, italic గా లేదా oblique గా కనిపించేలా చేయవచ్చు. font-variant property ద్వారా text ను small caps రూపంలో చూపించవచ్చు.

font-style

normal: text సాధారణ style లో కనిపిస్తుంది.
italic: text వంగిన రూపంలో కనిపిస్తుంది.
oblique: text ను browser వంగిన రూపంలో చూపిస్తుంది. ఇది italic కు దగ్గరగా ఉంటుంది.

font-variant

font-variant: small-caps; ఉపయోగిస్తే lowercase letters చిన్న capital letters లాగా కనిపిస్తాయి. ఇప్పటికే ఉన్న uppercase letters సాధారణ capital letters కంటే కొంచెం పెద్దగా కనిపిస్తాయి.

ఈ properties ను headings, labels, quotations, చిన్న descriptions మరియు ప్రత్యేకంగా చూపించాల్సిన text కోసం ఉపయోగించవచ్చు. ఇవి text content ను మార్చవు; browser లో text కనిపించే విధానాన్ని మాత్రమే మార్చుతాయి.

ఉదాహరణ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Font Style and Font Variant</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .normal-text {
      font-style: normal;
    }

    .italic-text {
      font-style: italic;
    }

    .oblique-text {
      font-style: oblique;
    }

    .small-caps-text {
      font-variant: small-caps;
    }
  </style>
</head>
<body>
  <p class="normal-text">This is normal text.</p>
  <p class="italic-text">This is italic text.</p>
  <p class="oblique-text">This is oblique text.</p>
  <p class="small-caps-text">This text uses small caps.</p>
</body>
</html>

పై code లో ప్రతి paragraph కు వేర్వేరు class ఇచ్చి, ఆ class selector ద్వారా సరైన font property apply చేశాము.

Simple Explanation

font-style text యొక్క వంగిన రూపాన్ని నియంత్రిస్తుంది. ఉదాహరణకు, font-style: italic; text ను italic గా చూపిస్తుంది.

font-variant text యొక్క ప్రత్యేక రూపాన్ని నియంత్రిస్తుంది. font-variant: small-caps; ఉపయోగించినప్పుడు చిన్న అక్షరాలు చిన్న capital letters లాగా కనిపిస్తాయి.

ఈ properties ను HTML లోని paragraph, heading లేదా span వంటి text elements పై CSS selector ద్వారా apply చేయవచ్చు.

Real-Life Example

ఒక పుస్తకంలో ముఖ్యమైన quote ను కొంచెం వంగిన అక్షరాలతో చూపిస్తారు. దీనికి font-style: italic; ఉపయోగించవచ్చు. అలాగే ఒక వెబ్‌సైట్‌లో category labels ను ప్రత్యేకంగా చూపించడానికి font-variant: small-caps; ఉపయోగించవచ్చు.

Code Examples

font-style మరియు font-variant ఉపయోగించడం

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Font Style and Font Variant</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      line-height: 1.8;
    }

    .normal {
      font-style: normal;
    }

    .italic {
      font-style: italic;
    }

    .oblique {
      font-style: oblique;
    }

    .small-caps {
      font-variant: small-caps;
    }
  </style>
</head>
<body>
  <p class="normal">Normal paragraph</p>
  <p class="italic">Italic paragraph</p>
  <p class="oblique">Oblique paragraph</p>
  <p class="small-caps">Small caps paragraph</p>
</body>
</html>

ఈ example లో నాలుగు paragraphs ఉన్నాయి. మొదటి paragraph సాధారణంగా ఉంటుంది. రెండవది italic, మూడవది oblique, నాలుగవది small caps రూపంలో కనిపిస్తుంది. ప్రతి paragraph కు ప్రత్యేక class selector ఉపయోగించాం.

బ్రౌజర్‌లో నాలుగు paragraphs కనిపిస్తాయి. మొదటిది సాధారణంగా, రెండవది italic గా, మూడవది oblique గా, నాలుగవది small caps రూపంలో కనిపిస్తుంది.

Line-by-Line Explanation

Normal paragraph

ఈ paragraph కు normal class ఇచ్చాం. ఈ HTML text పై normal font style apply అవుతుంది.

.normal {
normal class ఉన్న element ను select చేయడానికి ఈ class selector ఉపయోగించబడింది.

font-style: normal;
ఈ declaration text ను సాధారణ style లో చూపిస్తుంది.

Italic paragraph

ఈ paragraph కు italic class ఉంది. అందువల్ల దీనిపై italic font style apply అవుతుంది.

font-style: italic;
ఈ value text ను కుడివైపు కొద్దిగా వంగిన italic రూపంలో చూపిస్తుంది.

Oblique paragraph

ఈ paragraph కు oblique class ఇచ్చాం. దీని text కూడా వంగిన రూపంలో కనిపిస్తుంది.

font-style: oblique;
ఈ declaration browser కు text ను oblique style లో చూపించమని చెబుతుంది.

Small caps paragraph

ఈ paragraph కు small-caps class ఉంది. అందువల్ల lowercase letters చిన్న capital letters లాగా కనిపిస్తాయి.

font-variant: small-caps;
ఈ property value text ను small caps రూపంలో చూపిస్తుంది. ఇది text content ను uppercase గా మార్చదు; కనిపించే రూపాన్ని మాత్రమే మార్చుతుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Font Style and Variant</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .message {
      font-style: italic;
      font-variant: normal;
    }
  </style>
</head>
<body>
  <p class="message">Welcome to the CSS typography lesson.</p>
</body>
</html>

Try It Yourself »

Practice

Practice: పై starter code లో .quote text ను italic గా మరియు small caps రూపంలో చూపించండి.

Hint: .quote selector లో font-style విలువను italic గా, font-variant విలువను small-caps గా మార్చండి.

Common Mistakes

font-style property కు italic బదులుగా itallic అని spelling తప్పుగా రాయడం.
సరైన spelling font-style: italic;. CSS property values ను ఖచ్చితంగా రాయాలి.

font-variant: uppercase; అని రాయడం.
font-variant కోసం ఈ lesson లో ఉపయోగించే సరైన విలువ small-caps. Text ను పూర్తిగా uppercase చేయడం వేరే CSS concept.

font-style లేదా font-variant ను selector బయట రాయడం.
ఈ properties ను selector యొక్క curly braces లో declaration గా రాయాలి. ఉదాహరణకు .quote { font-style: italic; }.

font-variant: small-caps; ఇచ్చినా text మొత్తం పెద్ద capital letters అవుతుందని అనుకోవడం.
small-caps lowercase letters ను చిన్న capital రూపంలో చూపిస్తుంది. ఇది HTML text ను మార్చదు.

Interview Questions

CSS లో font-style property ఎందుకు ఉపయోగిస్తారు?

Answer: Text యొక్క style ను normal, italic లేదా oblique గా మార్చడానికి font-style property ఉపయోగిస్తారు.

font-style: italic; మరియు font-style: oblique; మధ్య సాధారణ తేడా ఏమిటి?

Answer: రెండూ text ను వంగినట్లు చూపిస్తాయి. italic సాధారణంగా italic typeface ను ఉపయోగిస్తుంది; oblique ఉన్న font ను browser వంచి చూపించవచ్చు.

font-variant: small-caps; ఏం చేస్తుంది?

Answer: Lowercase letters ను చిన్న capital letters లాగా చూపిస్తుంది. ఇది text content ను మార్చకుండా దాని visual appearance ను మార్చుతుంది.

font-style property కి సాధారణ default value ఏమిటి?

Answer: font-style property యొక్క సాధారణ default value normal.

Exam Questions

Text ను italic గా చూపించడానికి సరైన CSS declaration ఏది?

Answer:

font-style: italic;

Small caps text కోసం ఏ property మరియు value ఉపయోగిస్తారు?

Answer:

font-variant: small-caps;

font-style: normal; ప్రభావం ఏమిటి?

Answer:

Text ను సాధారణ, వంగని రూపంలో చూపిస్తుంది.

font-style మరియు font-variant మధ్య తేడా ఏమిటి?

Answer:

font-style text యొక్క normal, italic లేదా oblique రూపాన్ని నియంత్రిస్తుంది. font-variant text ను small caps వంటి variant రూపంలో చూపిస్తుంది.

Quick Revision

font-style text ను normal, italic లేదా oblique గా చూపిస్తుంది.
font-style: normal; text ను సాధారణంగా చూపిస్తుంది.
font-style: italic; text ను italic గా చూపిస్తుంది.
font-style: oblique; text ను వంగిన రూపంలో చూపిస్తుంది.
font-variant: small-caps; lowercase text ను చిన్న capital letters లాగా చూపిస్తుంది.
ఈ properties ను selector యొక్క curly braces లో రాయాలి.

Font Style and Font Variant