<!doctype html>
<html xmlns="
http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style type="text/css">
textarea{ line-height: 1.2; }
textarea#targ { font-family: freeserif; }
</style>
<script type="text/javascript">
function getStyle( elt ) { return document.getElementById(elt).style; }
function setFace( c ) { getStyle("targ").fontFamily = c.text; }
function setWeight( c ) { getStyle("targ").fontWeight = c.text; }
function setStyle( c ) { getStyle("targ").fontStyle = c.text; }
</script>
</head>
<body>
<p class="controls">
<span>Font:
<select onchange="setFace(options[selectedIndex])">
<option>FreeSerif</option> <option>FreeSans</option> <option>FreeMono</option>
</select>
</span>
<span>Weight:
<select onchange="setWeight(options[selectedIndex])">
<option>normal</option> <option>bold</option>
</select>
</span>
<span>Style:
<select onchange="setStyle(options[selectedIndex])">
<option>normal</option> <option>oblique</option>
</select>
</span>
</p>
<p>
<textarea id="targ" rows="10" cols="40"></textarea>
</p>
</body>
</html>