CSS

CSS Fonts || Font Family & Size

css fonts

In order to enhance the html document beauty and attractiveness. CSS fonts,help us by providing variety of fonts.We can also change the look of each font by manipulating its size, weight etc.  

Font Family:

The property font-family is use to change the font of text data, It can be a single value or multiple.In case of multiple CSS fonts,the browser will apply the first,if it is not supported by browser than it will goes for next font.

Example #1:

Write commonly use font-family.

<p style="font-family: Arial, Helvetica, sans-serif;">Arial, Helvetica, sans-serif</p>

    <p style="font-family: Cambria, Cochin, Georgia, Times;">Cambria, Cochin, Georgia, Times</p>

    <p style="font-family: 'Times New Roman', Times, serif;">Times New Roman, Times, serif</p>

    <p style="font-family: Verdana, Geneva, Tahoma, sans-serif;">Verdana, Geneva, Tahoma, sans-serif</p>

    <p style="font-family: monospace">monospace</p>

    <p style="font-family: sans-serif">sans-serif</p>

    <p style="font-family: 'Courier New', Courier, monospace;">'Courier New', Courier, monospace</p>

    <p style="font-family: Verdana, Geneva, Tahoma, sans-serif;">Verdana, Geneva, Tahoma, sans-serif</p>

Output:

Arial, Helvetica, sans-serif

Cambria, Cochin, Georgia, Times

Times New Roman, Times, serif

Verdana, Geneva, Tahoma, sans-serif

monospace

sans-serif

‘Courier New’, Courier, monospace

Verdana, Geneva, Tahoma, sans-serif

Font weight:

 

The Font-weight property increase or decrease the weight of font in Css fonts.In consists of level from (100 to 900) as 100 is for lighter and 900 is for bolder,In addition, some keywords also categories it like lighter,bolder,bold,inherit, initial, normal and none.

Example #2:

Give different weight to html paragraph.

<p style="font-weight: 100">one</p>
<p style="font-weight: 550">two</p>
<p style="font-weight: 900">three</p>
<p style="font-weight: lighter">four</p>
<p style="font-weight: bolder">five</p>

Output:

one

two

three

four

five

Font Style:

In order to set different styles to CSS fonts, font-style property is used.Font style property has following values:

  • normal
  • inherit
  • italic
  • oblique
  • initial
  • unset

Example #3:

<p style="font-style: inherit">one</p>
<p style="font-style: initial">two</p>
<p style="font-style: italic">three</p>
<p style="font-style: oblique">four</p>
<p style="font-style: unset">five</p>
<p style="font-style: normal">six</p>

Output:

one

two

three

four

five

six

Font Size:

The font-size use to change the size of CSS fonts in different units such as pixels,em,rem,inch etc and also with levels like medium, large , small etc.

Example #4:

<p style="font-size: 10px">one</p>
<p style="font-size: 2em">two</p>
<p style="font-size: small">three</p>
<p style="font-size: large">four</p>
<p style="font-size: inherit">five</p>
<p style="font-size: xx-small">six</p>

Output:

one

two

three

four

five

six

 

For more Examples Related CSS,html and Java Script Visit on Coding Academics

For Web,Java and Assembly language related Semester Projects please Visit on Programming Zone.

Leave a Reply

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