LzFont
An LzFont object represents a font. You can create an instance of the LzFont class using the font tag. The font tag must be a direct child of the canvas tag or the library tag.
Table 3.3 presents the attributes of the LzFont class.
| Name | Usage | Type | Default | Accessibility |
|---|---|---|---|---|
| advancetable | JS only | array of numbers | read-only | |
| Description. An array of character widths indexed by character codes (normally ASCII). | ||||
| ascent | JS only | number | read-only | |
| Description. The ascent of this font above the baseline in pixels. | ||||
| descent | JS only | number | read-only | |
| Description. The descent of this font below the baseline in pixels. | ||||
| height | JS only | number | read-only | |
| Description. The height of this font in pixels. | ||||
| lsbtable | JS only | array of numbers | read-only | |
| Description. An array of character left-side bearings indexed by character codes (normally ASCII). | ||||
| name | Tag and JS | string | read-only | |
| Description. The identifier for this font. | ||||
| rsbtable | JS only | array of numbers | read-only | |
| Description. Array of character right-side-bearings indexed by character codes (normally ASCII). | ||||
| src | Tag only | string | read-write | |
| Description. The path to font file relative to the lps/fonts directory under the installation directory. | ||||
| style | Tag and JS | string | plain | read-only |
| Description. The style for this font. The value is one of “bold”, “italic”, “bold italic”, “italic bold”, and “plain”. | ||||
For example, the code in Listing 3.5 shows how to use the font tag:
Listing 3.5. Using a font
<canvas height="50" fontsize="18">
<font src="lztahoe8.ttf" name="tahoe"/>
<text font="tahoe">
You can use any TTF font
as long as you have the source
</text>
</canvas> |
To test and run this program, direct your browser to this URL:
http://localhost:8080/lps-4.0.x/app03/fontTest1.lzx
You will see in your browser something similar to Figure 3.5.
OpenLaszlo will search the lps/fonts directory for font files. Therefore, you can specify the following in your code:
<font src="congab.ttf" name="Conga"/>
Note that you do not need to specify the path to the congab.ttf file because this file resides in the lps/fonts directory. However, if a font file lives in a directory under fonts, you need to include the folder too.
For instance:
<font src="verity/verity9.ttf" name="Verity"/>
This indicates to the OpenLaszlo Server that the verity9.ttf file can be found under the lps/fonts/verity folder.
If a component specifies an unidentified font name in its font attribute, OpenLaszlo will send a runtime error message. However, compilation will continue and the default font will be used.
As another example, the button in the code in Listing 3.6 uses the verity font.
Listing 3.6. Using a different font in a button
<canvas height="50" fontsize="12">
<font src="verity/verity9.ttf" name="verity"/>
<button font="verity" text="Register"/>
</canvas> |
You can invoke the application by using this URL:
http://localhost:8080/lps-4.0.x/app03/fontTest2.lzx
Figure 3.6 shows the result.
Figure 3.6. A button that uses a non-default font
