The HTML5 Canvas Text API - HTML5 Canvas - page 79

[ font style ] [ font weight ] [ font size ] [ font face ]
An example might be:
context.font = "italic bold 24px serif";
or:
context.font = "normal lighter 50px cursive";
Once the context.font property is set, it will apply to all text that is rendered
afterward—until the context.font is set to another CSS-compliant string.
Handling Font Size and Face in Text Arranger
In Text Arranger, we have implemented only a subset of the available font options for
displaying text. We have chosen these to make the application work in as many brows-
ers as possible. Here is a short rundown of the options we will implement.
Available font styles
CSS defines the valid font styles as:
normal | italic | oblique | inherit
In Text Arranger, we have implemented all but inherit .
Here is the markup we used to create the font style <select> box in HTML. We made
the id of the form control equal to fontStyle . We will use this id when we listen for a
change event, which is dispatched when the user updates the value of this control. We
will do this for all the controls in this version of Text Arranger:
<select id="fontStyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
Available font weights
CSS defines the valid font weights as:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
inherit | auto
We have used only normal , bold , bolder , and lighter in Text Arranger. You can add
the other values as you see fit.
Here is the markup we used to create the font weight <select> box in HTML:
<select id="fontWeight">
<option value="normal">normal</option>
<option value="bold">bold</option>
<option value="bolder">bolder</option>