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;


