Demo : https://www.lenlop123.com/2020/09/11-font-family-font-size-font-style.html




<style>
  p.serif {font-family: "Times New Roman", Times, serif;}
  p.sansserif {font-family: Helvetica, Arial, sans-serif;}
  p.monospace {font-family: "Courier New", Courier, monospace;}
  p.cursive {font-family: Florence, cursive;}
  p.fantasy {font-family: Blippo, fantasy;}
</style>

<p class="serif">This is a paragraph shown in serif font.</p>
<p class="sansserif">This is a paragraph shown in sans-serif font.</p>
<p class="monospace">This is a paragraph shown in monospace font.</p>
<p class="cursive">This is a paragraph shown in cursive font.</p>
<p class="fantasy">This is a paragraph shown in fantasy font.</p>





<style>
    p.num_size {font-size: 11px;}
    p.small {font-size: small;}
    p.medium {font-size: medium;}
    p.large {font-size: large;}
    p.xlarge {font-size: x-large;}
</style>

<p class="num_size">Paragraph text set to be 11px</p>
<p class="small">Paragraph text set to be small</p>
<p class="medium">Paragraph text set to be medium</p>
<p class="large">Paragraph text set to be large</p>
<p class="xlarge">Paragraph text set to be very large</p>






<style>
    p.normal {font-style: normal;}
    p.italic {font-style: italic;}
    p.oblique {font-style: oblique;}
</style>

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>





<style>
  p.light {font-weight: lighter;}
  p.bold {font-weight: bold;}
  p.bolder {font-weight: bolder;}
  p.thicker {font-weight: 700;}
</style>

<p class="light">This is a font with a "lighter" weight.</p>
<p class="bold">This is a font with a "bold" weight.</p>
<p class="bolder">This is a font with a "bolder" weight.</p>
<p class="thicker">This is a font with a "700" weight.</p>




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

<p class="normal">Paragraph font variant set to normal.</p>
<p class="small">Paragraph font variant set to small-caps.</p>