CSS Fonts in Hindi – Fonts property In CSS In Hindi

CSS

CSS Fonts in Hindi – Fonts Property In CSS In Hindi – Font Properties Se Ham Kisi Text Ka Font decide Karte hai ki text kis Tarika ka Dikhega. Kisi bhi website ke liye ek sahi font select krna bahut jyada jaroori hai. Ek aisa font use krna chahiye jo ki asani se read kiya ja sake.

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

Fonts Property In CSS In Hindi

Text Ke Font Ko Modify Karne Liye Bahut Sari Font Properties Css Me Available Hai, Aap Font-Family, Font-Style, Font-Size, Google Fonts Etc. Properties Use Kar Sakte Hai |

Website Me Alag-Alag Font Istemal Karna Bhi Bahut Important Kyoki Font User Experience Ko Badata Hai . Isliye Ek Good Looking Font Istemal karna Bahut Importan Hai |

Font-Family In CSS In Hindi

Chalo Ek Example Ke Jariye Samajhate Hai Ki Font-Family Property Ko Kese Use Kar Skte Hai | Iske liye Ham Do Paragraph Lete Hai, Aur Unhe p1 And p2 Class De dete Hai, Ab Dono Class Me Alg-Alg Font-Family Set Karte Hai, Aur Dekhte Hai Dono Paragraph Ka Alg-Alg Font Dikhai Deta Hai |

Example –

<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
} 
</style>
 <h2>CSS Font-Family</h2>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>

Output –

Font-Style In CSS In Hindi

Font-Style ,Text Ko Alg-Alg Font Style Dene Ke liye Use Kiya Jata Hai , Font-style Me Mainly Tin Value Hi Use Ki Jati Hai |

3 Types Of Font-Style CSS Property

  1. normal style
  2. italic style
  3. oblique style
  4. CSS Selectors
  5. CSS How-To

1. Normal Style

Normal Font-Style Me Text Hame Normal Dikhai Deta Hai |

Example –

<style>
p{
  font-style: normal;
}
</style>

<p>This is a paragraph in normal style.</p>

2. Italic Style

Font-Style Italic Me Text Italic Style Me Dikhai Dega |

Example –

<style>
p{
  font-style: italic;
}
</style>

<p>This is a paragraph in italic style.</p>

3. Oblique Style

Font-Style Oblique Me Text Oblique Style Me Dikhai Dega |

<style>
p{
  font-style: oblique;
}
</style>

<p>This is a paragraph in oblique style.</p>

Font-Size In CSS In Hindi

Font-Size Property Se Ham Kisi Text Ki Size Control Kar Skte Hai , Text Ki Size Ko Jarurat Ke Hisab Se Manage Karna Bahut Jroori Hota Hai |

Font-Size Ko Ham Mainly Do Tarike Se Manage Karte Hai –

  1. Font-Size With Pexels
  2. Font-Size With Em

1. Font-Size With Pexels In CSS

Font-Size With Pexels Set Karne Se, Text Size Par Hamara Pura Control Hota Hai ,Ham Text Ko Chahe Jitna Pexel Size De Skte HAi |

Example –

<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Output –

2. Font Size With Em In CSS –

Em Unit Use Kar Ke Ham User Ko Access De Sakte Hai Ki Vo Bhi Apni Need Ke Anusar Text Ko Resize Kar Sake , 1Em ka Matalab Hai Ki Normal Text Ki Size , Browers Me Default Text Size 16px Hoti Hai ,Islye 1em Ka Matalab Hai 16 px , Text Size Ko Pexel Se Em Me Calculate Karne Ka Formula Hai : Pexel/16 = Em |

Example –

<style>
h1 {
  font-size: 2.5em; 
}

h2 {
  font-size: 1.875em; 
 }

p {
  font-size: 0.875em;
}
</style>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

Output –

Font-Weight In CSS In Hindi

Font-Weight Property Se Ham Font Ko Apni Jarurt Ke Hisab Se Bold, Normal ,Lighter ,Ya Kuchh Bhi Font-Weight Value De Skte Hai |

Example –

<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

Output –

Google Fonts In CSS In Hindi

Agar Aap Html Ke Standard Fonts Ko Use Nhi Karna Chahte Hai , To Aap Google Fonts Ko Bhi Use Kar Skte Hai ,Jo Ekdam Free Hai Aur Google Fonts Par 1000 Se Jyada Fonts Available Hai |

Google Fonts Ko Use Karne Ke liye Hme Html Ke Head Section Me Ek Special Stylesheet Add Karni Pdegi |

Example –

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>

<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

Output –

Leave a Reply

Your email address will not be published. Required fields are marked *