CSS Text and Font Shorthand

CSSలో text appearance మార్చడానికి font-related properties ఉపయోగిస్తాము. font shorthand ద్వారా font-style, font-variant, font-weight, font-size, line-height మరియు font-family వంటి విలువలను ఒకే declaration లో రాయవచ్చు.

Font shorthand syntax

సాధారణ syntax:

font: font-style font-variant font-weight font-size/line-height font-family;

ఈ shorthandలో font-size మరియు font-family తప్పనిసరిగా ఉండాలి. మిగిలిన విలువలు optional. సాధారణంగా font-size ను font-family ముందు రాయాలి. line-height ఇవ్వాలంటే font-size తరువాత slash ఉపయోగించాలి.

ఉదాహరణ

font: italic 700 30px/1.3 Georgia, serif;

• italic text style ను italic చేస్తుంది.
• 700 text weight ను bold చేస్తుంది.
• 30px font size ను నిర్ణయిస్తుంది.
• 1.3 line-height ను నిర్ణయిస్తుంది.
• Georgia, serif font family ను నిర్ణయిస్తుంది.

Shorthandలో ఏ optional value ఇవ్వకపోతే, ఆ value browser యొక్క default లేదా initial value కి reset కావచ్చు. అందువల్ల shorthand declaration రాసేటప్పుడు అవసరమైన values అన్నీ స్పష్టంగా ఇవ్వడం మంచిది.

Complete example

క్రింది ఉదాహరణలో heading మరియు paragraph కు font shorthand ఉపయోగించబడింది:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Font Shorthand Example</title>
  <style>
    body {
      margin: 24px;
      color: #222222;
    }

    h1 {
      font: 700 32px/1.2 Arial, sans-serif;
    }

    p {
      font: italic 400 18px/1.6 Georgia, serif;
    }
  </style>
</head>
<body>
  <h1>Typography Practice</h1>
  <p>This paragraph uses CSS font shorthand.</p>
</body>
</html>

ఇక్కడ h1 ఒకే lineలో bold font, 32px size, 1.2 line-height మరియు Arial font family పొందుతుంది. p italic style, normal weight, 18px size, 1.6 line-height మరియు Georgia font family పొందుతుంది.

Simple Explanation

Font shorthand అంటే fontకు సంబంధించిన అనేక CSS properties ను ఒకే lineలో రాయడం.

ఉదాహరణకు, ఈ declarations:

font-style: italic;
font-weight: 700;
font-size: 18px;
line-height: 1.6;
font-family: Georgia, serif;

ఇవే విషయాలను ఇలా చిన్నగా రాయవచ్చు:

font: italic 700 18px/1.6 Georgia, serif;

ఇది code ను చిన్నగా, చదవడానికి సులభంగా చేస్తుంది. Browser ఈ shorthand declaration ను విడిగా ఉన్న font properties లా అర్థం చేసుకుంటుంది.

Real-Life Example

ఒక magazine లేదా news card ను ఊహించండి. Headline పెద్దగా మరియు boldగా ఉండాలి. Article text కొంచెం చిన్నగా, readable line spacingతో ఉండాలి. ప్రతి property ను విడిగా రాయడం కంటే font shorthand ద్వారా ప్రతి text element యొక్క పూర్తి typography style ను ఒకే lineలో నిర్వచించవచ్చు.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Font Shorthand Example</title>
  <style>
    body {
      margin: 24px;
      color: #222222;
    }

    h1 {
      font: 700 32px/1.2 Arial, sans-serif;
    }

    p {
      font: italic 400 18px/1.6 Georgia, serif;
    }
  </style>
</head>
<body>
  <h1>Typography Practice</h1>
  <p>This paragraph uses CSS font shorthand.</p>
</body>
</html>

The browser displays a large bold Arial heading reading “Typography Practice” and an italic Georgia paragraph below it with comfortable line spacing.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Font Shorthand</title>
  <style>
    .card-title {
      font: 700 28px/1.2 Arial, sans-serif;
    }

    .card-text {
      font: normal 400 17px/1.6 Georgia, serif;
    }
  </style>
</head>
<body>
  <h1 class="card-title">Learning CSS</h1>
  <p class="card-text">Font shorthand makes typography declarations shorter.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• font shorthand అనేక font propertiesను ఒకే declarationలో కలుపుతుంది.
• font-size మరియు font-family తప్పనిసరి values.
• font-size మరియు line-height మధ్య slash ఉపయోగించాలి.
• సాధారణ order: font-style font-variant font-weight font-size/line-height font-family.
• Fallback fontsను commaతో వేరు చేయాలి.
• Shorthandలో omitted values default లేదా initial valueకు reset కావచ్చు.