Fonts in CSS

CSS Fonts

CSS рдореЗрдВ рдХрдИ рд╕рд╛рд░реА font properties рд╣реИрдВ рдЬреЛ text рдХреЗ рдЕрд▓рдЧ рдЕрд▓рдЧ aspects рдХреЛ define рдХрд░рддреА рд╣реИрдВред

Font Family :- рдХрд┐рд╕реА text рдХреА font family рдХреЛ set рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП font-family property рдХрд╛ use рдХрд░рддреЗ рд╣реИрдВред

For. e.g.

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

рдиреЛрдЯ :- рдпрджрд┐ font family рдХреЗ рдирд╛рдо рдореЗрдВ рдПрдХ рд╕реЗ рдЬреНтАНрдпрд╛рджрд╛ words рд╣реЛрдВ рддреЛ рдЙрд╕реЗ double quotes (тАЬ тАЭ) рдХреЗ рдЕрдВрджрд░ рд▓рд┐рдЦреЗрдВрдЧреЗред

рдЬреИрд╕реЗ-

p{
font-family: тАЬTimes New RomanтАЭ, Times, Serif;
}


Font Style:- рдХрд┐рд╕реА text рдХреА style specify рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП font-style property рдХрд╛ use рдХрд░рддреЗ рд╣реИрдВред рдЗрд╕рдХреА рддреАрди values рд╣реЛрддреА рд╣реИрдВ тАУ

* normal: text normally рдЬреИрд╕рд╛ рд╣реИрдВ рд╡реИрд╕рд╛ рд╣реА show рд╣реЛрдЧрд╛ред
* italic: text italic form рдореЗрдВ show рд╣реЛрдЧрд╛ред

For e.g.
p{
font-style: italic;
}

* oblique: oblique style text рджреЗрдЦрдиреЗ рдореЗрдВ italic рдЬреИрд╕рд╛ рд╣реА рд▓рдЧрддрд╛ рд╣реИрдВ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рджреЛрдиреЛрдВ values рдореЗрдВ рдлрд░реНрдХ рд╣реИрдВред

Font Size: рдХрд┐рд╕реА text рдХрд╛ size set рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП font-size property рдХрд╛ use рдХрд░рддреЗ рд╣реИрдВред

For e.g.


<style>
p{
font-size: 48px;
}
</style>

<p>This is a test.</p>

Result :- This is a test

рд╣рдо font-size рдХреА value px рдХреЗ рдмрдЬрд╛рдП cm рдореЗрдВ рднреА рджреЗ рд╕рдХрддреЗ рд╣реИрдВред

рдиреЛрдЯ:- 1cm = 16px

For e.g.

p{
font-size: 32px;
}

рдФрд░

p{
font-size: 2cm;
}

рдЗрди рджреЛрдиреЛрдВ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдореЗрдВ font-size рдПрдХ рд╕рдорд╛рди рд╣реЛрдЧрд╛ рдХреНтАНрдпреЛрдВрдХрд┐ 32px, 2cm рдХреЗ рдмрд░рд╛рдмрд░ рд╣реИрдВред

Font Weight:- рдХрд┐рд╕реА font рдХрд╛ weight specify рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП font-weight property рдХрд╛ use рдХрд░рддреЗ рд╣реИрдВред

For e.g.

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

<p>This is a test</p>

font-weight рдХреА рдХреБрдЫ рджреВрд╕рд░реА values рднреА рд╣реЛ рд╕рдХрддреА рд╣реИрдВред

  • font-weight: bold;
  • font-weight: lighter;
  • font weight: bolder;
  • font-weight: 200;
  • font-weight: inherit;

Font-Variant:

font-variant property рдпрд╣ рд╕реНтАНрдкреЗрд╕рд┐рдлрд╛рдп рдХрд░рддреА рд╣реИрдВ рдХрд┐ рдХреЛрдИ text small caps font рдореЗрдВ display рд╣реЛрдЧрд╛ рдпрд╛ рдирд╣реАрдВред

For e.g.

<style>
p{
font-variant: small caps;
}
</style>

<p>This is a test</p>

Output :- THIS IS A TEST

font-variant рдХреА рдХреБрдЫ рджреВрд╕рд░реА Values рднреА рд╣реЛ рд╕рдХрддреА рд╣реИрдВред

  • font-variant: normal;
  • font-variant: initial;
  • font-variant: inherit;

error: Content is protected !!