CSS3 > Font

Font styling in CSS3

How to use Font properties using font method in CSS


Font

Font is used to change style of the text using different font properties

  • Font-size
  • Font-family
  • font-style
  • font-weight
  • font-variant 

Font size

It changes the size of the text using property font size

 <p>Fontsize</p>
    <p style="font-size:30px">TechFunda</p>

In the above code snippet we have fontsize with 30px which changes the height of the text by 30px

output

Font style

It changes the style of font

  <p>Fontstyle</p>
    <p style="font-style:inherit">TechFunda</p>
    <p style="font-style:initial">TechFunda</p>
    <p style="font-style:italic">TechFunda</p>
    <p style="font-style:normal">TechFunda</p>
    <p style="font-style:oblique">TechFunda</p> 

Fontstyle

In the above code snippet we have defined font style with initia, inherit, italic, normal, oblique

output

Font-family

It changes the style of the text

 <p>Fontfamily</p>
    <p style="font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">TechFunda</p>
    <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif">TechFunda</p>
    <p style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">TechFunda</p>
    <p style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">TechFunda</p>
    <p style="font-family:'Times New Roman', Times, serif">TechFunda</p> 

Font family

In the above code snippet we have defined the font family to define the style by giving different values in the style

output

Font weight

It changes text to bold and normal letters

 <p>Font-weight</p>
    <p style="font-weight:bolder">TechFunda</p>
    <p style="font-weight:bold">TechFunda</p>
    <p style="font-weight:normal">TechFunda</p>
    <p style="font-weight:initial">TechFunda</p>

Font weight

In the above code snippet we have font weight as bold and normal letters 

output

Font variant

It changes the text to small caps and capital letters

<p>Font variant</p>
    <p style="font-variant:normal">Techfunda</p>
    <p style="font-variant:small-caps">TechFunda</p>

Font variant

In the above code snippet we have defined font variant to change text to small and capital letters

output

 Views: 584 | Post Order: 137



Write for us