CSS font

1. Set the text font

p.serif {
    font-family:'Times New Roman', Times, serif;
}
p.sansserif {
    font-family: Arial, Helvetica, sans-serif;
 }

< Body > 
< h1 > CSS font-falily </ h1 > 
< the p- class = "serif" > This paragraph font is Times New Roman </ the p- > 
< the p- class = "SansSerif" > This paragraph font is Arial </ P > 
</ body >

2. Set the font size

h1 {
    font-size: 250%;
}
h2 {
    font-size: 200%;
}
p {
    font-size: 100%;
}

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>

3. Set the font size px

h1{
    font-size: 50px;
}
h2 {
    font-size: 40px;
}
p {
    font-size: 12px;
}

< Body > 
< h1 of > This IS heading. 1 </ h1 of > 
< H2 > This IS heading 2 </ H2 > 
< P > This IS A paragraph. </ P > 
< P > allow Internet Explorer 9, Firefox, Chrome, Opera, Safari and adjust the text size by scaling browser. </ P > 
< P > < B > Note: </ B > This example version before IE9 inoperative, Version 9. The Prior </ P > 
</ body >

4. Set the size of the font em

h1{
    font-size: 3.125em; /* 50px/16=3.125em*/
}
h2 {
    font-size: 2.5em; /* 40px/16=2.5em*/
}
p {
    font-size: 0.75em; /* 12px/16=0.75em*/
}

< Body > 
< h1 of > This IS heading. 1 </ h1 of > 
< H2 > This IS heading 2 </ H2 > 
< P > This IS A paragraph. </ P > 
< P > allow Internet Explorer 9, Firefox, Chrome, Opera, Safari and adjust the text size by scaling browser. </ P > 
< P > < B > Note: </ B > This example version before IE9 inoperative, Version 9. The Prior </ P > 
</ body >

5. Set the font size and percentage em

body {
    font-size: 100%
}
h1 {
    font-size: 3.125em; /* 50px/16=3.125em*/
}
h2 {
    font-size: 2.5em; /* 40px/16=2.5em*/
}
p {
    font-size: 0.75em; /* 12px/16=0.75em*/
}

< Body > 
< h1 of > This IS heading. 1 </ h1 of > 
< H2 > This IS heading 2 </ H2 > 
< P > This IS A paragraph. </ P > 
< P > allow Internet Explorer 9, Firefox, Chrome, Opera, Safari and adjust the text size by scaling browser. </ P > 
< P > < B > Note: </ B > This example version before IE9 inoperative, Version 9. The Prior </ P > 
</ body >

6. Set font style

p.normal { 
    font-style : Normal ; 
} 
p.italic { 
    font-style : Italic ; / * browser displays an italic font style * / 
} 
p.oblique { 
    font-style : Oblique ; / * browser displaying a font style inclined * / 
}

< Body > 
< P class = "Normal" > This is a paragraph, normal. </ P > 
< P class = "Italic" > This is a paragraph, italics. </ P > 
< P class = "Oblique" > This is a paragraph, italics. </ P > 
</ body >

7. Set the font allogeneic

p.capitalize {
    font-variant: normal;
}
p.smallcaps {
     font-variant: small-caps;
}

<body>
<P class="capitalize">my name is hege refsnes.</P>
<p class="smallcaps">my name is hege refsnes.</p>
</body>

8. Set the font weight

p.normal {
    font-weight: normal;
}
p.lighter {
    font-weight: normal;
}
p.thick {
    font-weight: bold;
}
p.thicker {
    font-weight: 900;
}

<body>
<P class="normal">This is a paragraph.</P>
<p class="lighter">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>

9. In a statement of all font properties

p.space { 
    font : 15px arial, sans-serif ; 
} 
P.oblique { 
    font : oblique bold 15px Georgia, serif ; 
}

<body>
<p class="space">This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>
<P class="oblique">This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</P>
</body>

1. Set the text font

2. Set the font size

3. Set the font size px

4. Set the size of the font em

5. Set the font size and percentage em

6. Set font style

7. Set the font allogeneic

8. Set the font weight

9. In a statement of all font properties

Guess you like