2007
04.02

CSS Font-Size Illustrated

After frustated unable to get my source codes displayed smaller, I decided to play around with CSS’ font-size for our amusement.

font-family font-size Target
Testing Font
Possible value:
Verdana
Arial
Helvetica
Sans-Serif
.. any font installed on your system
Possible values:
pixel, example: 10px 8px
point, example: 8pt
old-school HTML, example: 1 2 3 … 8
ems, example: 0.8em 1em
 

Done using Javascript:

<script language="javascript">

function UpdateFont()
{
    var objTarget = document.getElementById('divtarget'); // a div
    var objSourceFont = document.getElementById('txbFont'); // a textbox
    var objSourceSize = document.getElementById('txbSize'); // a textbox
    if (objTarget != null && objSourceFont != null && objSourceSize != null)
   {
       objTarget.style.fontSize = objSourceSize.value;
       objTarget.style.fontFamily = objSourceFont.value;
   }
}

  </script>

 

Resources:
W3C Standard
W3School Tutorial
 
Share the love:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • email
  • Live
  • MySpace
  • StumbleUpon
  • Technorati
  • Reddit
  • HackerNews
  • Twitter

 

Advertise Here

 

No Comment.

Add Your Comment