Web Development Tutorials

Font Styles

Style sheet properties that apply to fonts can be changed dynamically, as the visitor views the Web page. In the following table are the stylesheet properties pertaining to fonts, along with Document Object Model (scripting) references to the same properties.

CSS and DOM Reference	Values
font-family:name object.style.fontFamily="name"	Font name can be any system font; multiple names can be specified in order of preference, separated by commas.
font-size:size object.style.fontSize="size"	Font size is specified as in a unit of measurement, normally point size (12pt).
font-style:style object.style.fontStyle="style"	Font style specified as normal italic
font-weight:weight object.style.fontWeight="weight"	Font weight specified as normal bold
font-variant:variant object.style.fontVariant="variant"	Font variant specified as normal small-caps

Figure 10-5. Font styles.

Changing Font Styles

Fonts are often changed to provide visual clues to the user that actions have taken place. In the following example, a text link changes its characteristics when the mouse is moved over and off the link, and when the link is clicked. (The link itself is not active.)

Click this Link

Figure 10-6. Changing font styles dynamically.

<a href="page.htm"
  onmouseover="this.style.fontWeight='bold'"
  onmousedown="this.style.fontSize='14pt'; this.style.color='red'"
  onmouseup="this.style.fontSize='12pt'; this.style.color='blue'"
  onmouseout="this.style.fontWeight='normal'">
    Click this Link
</a>

Listing 10-11. Code to change font styles dynamically.

The above <a> tag includes four event handlers to trap four separate events associated with clicking the link. When the mouse is moved over the link, a mouseover event takes place; the onmouseover event handler changes the font to bold. When the mouse button is clicked down, a mousedown event takes place; the onmousedown event handler increased the font size and changes the color to red. When the mouse button is released, a mouseup event takes place; the onmouseup event handler reduces the font size and sets the color back to blue. When the mouse is moved off the link, a mouseout event takes place; the onmouseout event handler changes the font back to normal weight. These events take place in addition to the linking action taken through the href="page.htm" parameter.

Using Functions

Inline scripts are used in the above example because the style changes apply to the single anchor tag. If all <a> tags on a page are to be styled in the same fashion, there would be convenience in creating external functions to handle these style changes. The scripts would not have to be duplicated in all tags. The above scripts are coded as functions in the following script block.

<script type="text/javascript">

function moMouseOver(tag) {
  tag.style.fontWeight = "bold";
}

function doMouseDown(tag) {
  tag.style.fontSize = "14pt";
  tag.style.color = "red";
}

function doMouseUp(tag) {
  tag.style.fontSize = "12pt";
}

function doMouseOut(tag) {
  tag.style.fontWeight = "normal";
}

</script>

Listing 10-12. Alternate code to change font styles dynamically.

Now, any <a> tag that is to take on these styles can call these functions.

<a href="page.htm"
  onmouseover="doMouseOver(this)"
  onmousedown="doMouseDown(this)"
  onmouseup="doMouseUp(this)"
  onmouseout="doMouseOut(this)">
    Link Text
</a>

Listing 10-13. Code to call functions to change font styles dynamically.

On each of the four events associated with the tag one of the functions is called. The function is also passed a self reference to the tag making the call (this). Each function receives the passed object reference through its tag argument; therefore, style settings are applied to that particular <a> tag making the call.

Using External DOM References

The following paragraph and table of radio buttons permit you to view the results of changing font characteristics of the paragraph. Click the radio buttons in any combination to view the style changes.

The radio buttons apply font characteristics through an onclick event handler that calls a function pertinent to the style setting. The function call passes along the style setting to apply.

<script type="text/javascript">

function changeFont(Font) {
  document.getElementById("PAR").style.fontFamily = Font;
}

function changeSize(Size) {
  document.getElementById("PAR").style.fontSize = Size;
}

function changeStyle(Style) {
  document.getElementById("PAR").style.fontStyle = Style;
}

function changeWeight(Weight) {
  document.getElementById("PAR").style.fontWeight = Weight;
}

function changeVariant(Variant) {
  document.getElementById("PAR").style.fontVariant = Variant;
}

function initialzeFontStyles() {
  document.getElementById("fontArial").onclick = function (){ changeFont('arial'); }  
  document.getElementById("fontCourier").onclick = function (){ changeFont('courier'); }  
  document.getElementById("fontGeorgia").onclick = function (){ changeFont('georgia'); }  
  document.getElementById("fontImpact").onclick = function (){ changeFont('impact'); }  
  document.getElementById("fontTimes").onclick = function (){ changeFont('times new roman'); }
  document.getElementById("fontVerdana").onclick = function (){ changeFont('verdana'); }
  document.getElementById("styleNormal").onclick = function (){ changeStyle('normal'); }
  document.getElementById("styleItalic").onclick = function (){ changeStyle('italic'); }
  document.getElementById("weightNormal").onclick = function (){ changeWeight('normal'); }
  document.getElementById("weightBold").onclick = function (){ changeWeight('bold'); }
  document.getElementById("variantNormal").onclick = function (){ changeVariant('normal'); }
  document.getElementById("variantSmallCaps").onclick = function (){ changeVariant('small-caps'); }
}

window.addEventListner('load', initialzeFontStyles, false);

</script>

<p id="PAR" style="border:solid 1; padding:10">
  Here is a paragraph of text that has various font settings that can be
  changed dynamically. Click the radio buttons below to view combinations
  of font style settings applied to this text.
</p>

<table>
<tr>
  <td>
    <b>fontFamily</b><br/>
    <input type="radio" id='fontArial' name="Font" checked/>arial<br/>
    <input type="radio" id='fontCourier' name="Font" />courier<br/>
    <input type="radio" id='fontGeorgia' name="Font" />georgia<br/>
    <input type="radio" id='fontImpact' name="Font" />impact<br/>
    <input type="radio" id='fontTimes' name="Font" />times new roman<br/>
    <input type="radio" id='fontVerdana' name="Font" />verdana<br/>
  </td>	
  <td>
    <b>fontStyle</b><br/>
    <input type="radio" id='styleNormal' name="Style" checked/>normal<br/>
    <input type="radio" id='styleItalic' name="Style" />italic<br/>
  </td>
  <td>
    <b>fontWeight</b><br/>
    <input type="radio" id='weightNormal' name="Weight" checked/>normal<br/>
    <input type="radio" id='weightBold' name="Weight" />bold<br/>
  </td>	
  <td>
    <b>fontVariant</b><br/>
    <input type="radio" id='variantNormal' name="Variant" checked/>normal<br/>
    <input type="radio" id='variantSmallCaps' name="Variant" />small-caps<br/>
  </td>
</tr>
</table>

Listing 10-14. Code to change paragraph font styles dynamically.

For instance, the button

<input type="radio" id='fontVerdana' name="Font" /> verdana

Calls function changeFont('verdana') and passes the font-family name to the function where it is received as argument Font. This style value is applied to the paragraph. Similar techniques are used for all other style settings.

An alternative to using function calls to style the above paragraph is to use inline scripts. The onclick event handler directly styles the paragraph through its full DOM reference:

<input type="radio" id='fontVerdana' name="Font" 
  onclick="document.getElementById("PAR").style.fontFamily='verdana'"/>verdana

Variety of DOM References

In previous examples, five ways to apply style changes with five different scripting techniques are considered.

An inline script applies a style setting to the object containing the script; a self reference to the object is used:
```
...onclick="this.style.property='value'"
```
An inline script applies a style setting to a different object; a full DOM reference to the identified object is made:
```
...onclick="document.getElementById("id").property='value'"
```
A function is called to apply a style setting to the object making the call; a self reference is passed to the function which receives the argument to which the styling is applied:
```
function functionName(object) {
  object.style.property = "value";
}

...onclick="functionName(this)"
```
A function is called to apply a style setting to a different object; a style value is passed to the function which applies it through a full DOM reference:
```
function functionName(value) {
  document.getElementById("id").style.property = value;
}

...onclick="functionName('value')"
```
A function that is not passed an argument applies a style setting to an object; a full DOM reference to the identified object is made:
```
function functionName() {
  document.getElementById("id").style.property = "value";
}

...onclick="functionName()"
```

These are the options you have for coding event handlers and functions to apply style settings to page elements. They all accomplish the same task; the particular method chosen depends primarily on coding efficiencies and the preferences you develop.

Font Styles

Changing Font Styles

Using Functions

Using External DOM References

Variety of DOM References

TOP | NEXT: Text Styles