Font Weight by number : font weight : Text HTML CSS TUTORIALS


HTML CSS TUTORIALS » Text » font weight »

 

Font Weight by number


 

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
td {
  width: 200px;
}

p.one {
  font-weight: normal;
}

p.two {
  font-weight: bold;
}

p.three {
  font-weight: bolder;
}

p.four {
  font-weight: lighter;
}

p.five {
  font-weight: 100;
}

p.six {
  font-weight: 200;
}

p.seven {
  font-weight: 300;
}

p.eight {
  font-weight: 400;
}

p.nine {
  font-weight: 500;
}

p.ten {
  font-weight: 600;
}

p.eleven {
  font-weight: 700;
}

p.twelve {
  font-weight: 800;
}

p.thirteen {
  font-weight: 900;
}
</style>
</head>

<body>
<h1>Font Weight</h1>

<table><tr><td valign="top">
<p class="one">normal</p>
<p class="two">bold</p>
<p class="three">bolder</p>
<p class="four">lighter</p>
</td><td>
<p class="five">100</p>
<p class="six">200</p>
<p class="seven">300</p>
<p class="eight">400</p>
<p class="nine">500</p>
<p class="ten">600</p>
<p class="eleven">700</p>
<p class="twelve">800</p>
<p class="thirteen">900</p>
</td></tr></table>
 
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Text
» font weight