Font Families and Web-safe Fonts

Font Families మరియు Web-safe Fonts

వెబ్ పేజీలో కనిపించే text ఏ రకమైన అక్షర శైలిలో కనిపించాలో నిర్ణయించడానికి CSSలో font-family property ఉపయోగిస్తాము.

font-family అంటే ఏమిటి?

font-family ఒక elementలోని text కోసం font పేరును లేదా fonts జాబితాను ఎంచుకుంటుంది. ఉదాహరణకు font-family: Arial, sans-serif; అని రాస్తే browser ముందుగా Arial fontను ఉపయోగించడానికి ప్రయత్నిస్తుంది.

Arial అందుబాటులో లేకపోతే browser తర్వాత ఇచ్చిన sans-serif fallback fontను ఉపయోగిస్తుంది. అందుకే ఒకటి కంటే ఎక్కువ font names ఇవ్వడం మంచిది.

Web-safe fonts అంటే ఏమిటి?

Web-safe fonts అనేవి చాలా computers మరియు operating systemsలో సాధారణంగా అందుబాటులో ఉండే fonts. ఉదాహరణలు: Arial, Verdana, Georgia, Times New Roman మరియు Courier New.

Font fallback list

Font listలో fontsను commaతో వేరు చేయాలి. సాధారణంగా మొదట specific font, చివరలో generic family ఉంచుతాము.

body {
  font-family: Arial, Helvetica, sans-serif;
}

ఈ codeలో browser ముందుగా Arialను వెతుకుతుంది. అది లేకపోతే Helveticaను ప్రయత్నిస్తుంది. రెండూ లేకపోతే ఏదైనా సాధారణ sans-serif fontను ఉపయోగిస్తుంది.

Generic font families

• serif – అక్షరాల చివర్లలో చిన్న అలంకరణలు ఉండే font style.
• sans-serif – సరళమైన, ఆధునికంగా కనిపించే font style.
• monospace – ప్రతి అక్షరానికి సమాన వెడల్పు ఉండే font style.
• cursive – చేతిరాతను పోలి ఉండే font style.
• fantasy – అలంకారమైన display font style.

సాధారణ website text కోసం sans-serif లేదా serif కుటుంబాలు ఎక్కువగా ఉపయోగిస్తారు. Code లేదా programming text కోసం monospace ఉపయోగకరంగా ఉంటుంది.

Simple Explanation

font-familyతో text ఏ fontలో కనిపించాలో చెబుతాము. ఒకే fontపై ఆధారపడకుండా fallback fonts కూడా ఇవ్వాలి.

ఉదాహరణకు font-family: Georgia, "Times New Roman", serif; అంటే browser ముందుగా Georgiaను ఉపయోగిస్తుంది. అది అందుబాటులో లేకపోతే Times New Romanను ఉపయోగిస్తుంది. అవి రెండూ లేకపోతే serif familyలోని మరో fontను ఎంచుకుంటుంది.

Web-safe fonts ఉపయోగిస్తే visitor computerలో ఆ font లేకపోవడం వల్ల layout లేదా text appearance పూర్తిగా మారే అవకాశం తగ్గుతుంది.

Real-Life Example

ఒక పుస్తకానికి serif font ఉపయోగిస్తే అది సంప్రదాయంగా, చదవడానికి అనుకూలంగా కనిపించవచ్చు. ఒక technology websiteకి sans-serif font ఉపయోగిస్తే అది modernగా కనిపిస్తుంది. Programming code చూపించే editorలో monospace font ఉపయోగిస్తే ప్రతి అక్షరం సమాన వెడల్పుతో కనిపిస్తుంది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Font Families</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.6;
      color: #222222;
    }

    h1 {
      font-family: Georgia, "Times New Roman", serif;
      color: #17365d;
    }

    .code-text {
      font-family: "Courier New", Courier, monospace;
      background-color: #f2f2f2;
      padding: 8px;
    }
  </style>
</head>
<body>
  <h1>Readable Web Fonts</h1>
  <p>This paragraph uses a sans-serif font.</p>
  <p class="code-text">font-family: monospace;</p>
</body>
</html>

The page displays a blue heading in a serif-style font, a normal paragraph in a sans-serif font, and a gray code-like paragraph in a monospace font.

Line-by-Line Explanation

Try It

Try this CSS code:

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

    h1 {
      font-family: Georgia, serif;
    }

    p {
      font-family: "Courier New", monospace;
    }
  </style>
</head>
<body>
  <h1>My Font Practice</h1>
  <p>Change the font-family values and run the page again.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• font-family text యొక్క font styleను నిర్ణయిస్తుంది.
• Web-safe fonts సాధారణంగా చాలా devicesలో అందుబాటులో ఉంటాయి.
• Fallback fontsను commaతో వేరు చేసి listగా రాయాలి.
• రెండు పదాల font namesను quotesలో రాయాలి.
• చివరలో serif, sans-serif లేదా monospace వంటి generic family ఇవ్వడం మంచిది.
• Heading, paragraph మరియు code textకు వేర్వేరు font families ఇవ్వవచ్చు.