The <font> tag is used to import fonts into an LZX
application. Each font in an LZX application has a source file (in
TrueType format), a name, and a style (plain, bold, italic, or bold
italic).
A font element within a
<canvas>
or
<library>
defines a font,
which can be referenced by
the font attribute of a view, or by the
face attribute of the <font> tag within HTML markup. A font element can
define a single font face or style, by using the
src attribute to refer to a TrueType™ font
that is included in the application.
For example
<font name="MyFont"
src="myfont.ttf"/>
defines a font whose data is read from the TrueType file named
myfont.ttf, and that can be referred to as
MyFont in the application source:
<text font="MyFont">some text in MyFont</text>
A font element can also define a font family, which contains a set of nested font elements which each define a font face or style. For example:
<font name="MyFont"> <face src="myfont.ttf"/> <face style="bold" src="myfontB.ttf"/> <face style="italic" src="myfontI.ttf"/> </font>
defines a font with three faces, plain, bold, and italic, which can be used as in:
<text font="MyFont" fontstyle="bold">bold</text>
<text font="MyFont"> plain <b>bold</b> and <i>italic</i> </text>
Here is a simple example of importing a font and using it.
<canvas height="50" fontsize="14">
<font src="helmetr.ttf" name="Helvetica"/>
<text font="Helvetica">Here is some text in Helvetica</text>
</canvas>
You can import multiple styles of the same font using the
<face> element:
<canvas height="60" fontsize="14">
<font name="Helvetica">
<face src="helmetr.ttf" style="plain"/>
<face src="helmetb.ttf" style="bold"/>
<face src="helmeti.ttf" style="italic"/>
</font>
<simplelayout/>
<text font="Helvetica">Here is some text in Helvetica</text>
<text font="Helvetica"><b>Here is some bold text in Helvetica</b></text>
<text font="Helvetica"><i>Here is some italic text in Helvetica</i></text>
</canvas>
Below is an example that displays several fonts:
<canvas height="400" width="600">
<splash/>
<!-- Import some fonts. -->
<font name="Arioso" src="ariosor.ttf">
<face src="ariosob.ttf" style="bold"/>
</font>
<font name="Chevara" src="chevarar.ttf">
<face src="chevaraor.ttf" style="bold"/>
</font>
<font name="Conga" src="congar.ttf">
<face src="congab.ttf" style="bold"/>
</font>
<font name="Helvetica-Condensed">
<face src="helmetcb.ttf" style="bold"/>
<face src="helmetcbi.ttf" style="bold italic"/>
<face src="helmetci.ttf" style="italic"/>
<face src="helmetcr.ttf"/>
</font>
<font name="Helvetica">
<face src="helmetr.ttf"/>
<face src="helmetb.ttf" style="bold"/>
<face src="helmeti.ttf" style="italic"/>
<face src="helmetbi.ttf" style="bold italic"/>
</font>
<font name="Times Roman">
<face src="timmonsr.ttf"/>
<face src="timmonsb.ttf" style="bold"/>
<face src="timmonsi.ttf" style="italic"/>
<face src="timmonsbi.ttf" style="bold italic"/>
</font>
<!-- Laszlo Pixel Font (8) -->
<font src="lzsans8.ttf" name="Sans Serif 8">
<face src="lzsans8b.ttf" style="bold"/>
</font>
<window title="Fonts are fun!" width="400" height="400" resizable="true">
<view width="500">
<simplelayout axis="y" spacing="10"/>
<view width="400" font="Sans Serif 8">
<simplelayout axis="y" spacing="10"/>
<text>Sans Serif 8</text>
<text>abcdefghijklmnopqrstuvwxyz1234567890!@#$%^*()-=+|</text>
<text>ABCDEFGHIJKLMNOPQRSTUVWXYZ,./ ?;':"[]{}\~`</text>
<text><b>Sans Serif 8</b></text>
<inputtext>inputtext here</inputtext>
<inputtext multiline="true" height="100" width="100">hello there</inputtext>
<inputtext>Sans Serif 8</inputtext>
<text><b>Bold </b><u>Underline <b>Bold Underline</b></u></text>
</view>
<view width="400" font="Helvetica" fontsize="14">
<simplelayout axis="y" spacing="10"/>
<text>Helvetica</text>
<text>abcdefghijklmnopqrstuvwxyz1234567890!@#$%^*()-=+|</text>
<text>ABCDEFGHIJKLMNOPQRSTUVWXYZ ,./ ;?;':"[]{}\~`</text>
<text><b>Helvetica</b></text>
<text><i>Helvetica</i></text>
<text><b><i>Helvetica</i></b></text>
<inputtext>inputtext here</inputtext>
<inputtext multiline="true" height="100" width="100">hello there</inputtext>
<inputtext>Helvetica</inputtext>
<text>
<b><i>BoldItalic</i> Bold </b><i>Italic</i>
<u>Underline <b>Bold Underline</b></u></text>
</view>
<view width="400" font="Helvetica-Condensed" fontsize="14">
<simplelayout axis="y" spacing="10"/>
<text>Helvetica-Condensed</text>
<text>abcdefghijklmnopqrstuvwxyz1234567890!@#$%^*()-=+|</text>
<text>ABCDEFGHIJKLMNOPQRSTUVWXYZ ,./?;':"[]{}\~`</text>
<text><b>Helvetica-Condensed</b></text>
<text><i>Helvetica-Condensed</i></text>
<text><u>Helvetica-Condensed</u></text>
<text><b><i>Helvetica-Condensed</i></b></text>
<inputtext>inputtext here</inputtext>
<inputtext multiline="true" height="100" width="100">hello there</inputtext>
<inputtext>Helvetica-Condensed</inputtext>
<text>
<b><i>BoldItalic</i> Bold </b><i>Italic</i>
<u>Underline <b>Bold Underline</b></u></text>
</view>
<view width="400" font="Times Roman" fontsize="14">
<simplelayout axis="y" spacing="10"/>
<text>Times Roman</text>
<text>abcdefghijklmnopqrstuvwxyz1234567890!@#$%^*()-=+|</text>
<text>ABCDEFGHIJKLMNOPQRSTUVWXYZ ,./?;':"[]{}\~`</text>
<text><b>Times Roman</b></text>
<text><i>Times Roman</i></text>
<text><u>Times Roman</u></text>
<text><b><i>Times Roman</i></b></text>
<inputtext>inputtext here</inputtext>
<inputtext multiline="true" height="100" width="100">hello there</inputtext>
<inputtext>Times Roman</inputtext>
<text>
<b><i>BoldItalic</i> Bold</b>
<i>Italic</i><u>Underline <b>Bold Underline</b></u>
</text>
</view>
<!-- These fonts do not have italic and bold italic -->
<view width="400" font="Arioso" fontsize="20">
<simplelayout axis="y" spacing="10"/>
<text>Arioso</text>
<text>abcdefghijklmnopqrstuvwxyz1234567890!@#$%^*()-=+|</text>
<text>ABCDEFGHIJKLMNOPQRSTUVWXYZ ,./?;':"[]{}\~`</text>
<text><b>Bold</b></text>
<inputtext>inputtext here</inputtext>
<inputtext multiline="true" height="100" width="100">hello there</inputtext>
<inputtext>Arioso</inputtext>
<text><u>Underline</u></text>
</view>
<view width="400" font="Conga" fontsize="14">
<simplelayout axis="y" spacing="10"/>
<text>Conga</text>
<text>abcdefghijklmnopqrstuvwxyz1234567890!@#$%^*()-=+|</text>
<text>ABCDEFGHIJKLMNOPQRSTUVWXYZ ,./ ?;':"[]{}\~`</text>
<text><b>Bold</b></text>
<inputtext>inputtext here</inputtext>
<inputtext multiline="true" height="100" width="100">hello there</inputtext>
<inputtext>Conga</inputtext>
<text><u>Underline</u></text>
</view>
<view width="400" font="Chevara" fontsize="14">
<simplelayout axis="y" spacing="10"/>
<text>Chevara</text>
<text>abcdefghijklmnopqrstuvwxyz1234567890!@#$%^*()-=+|</text>
<text>ABCDEFGHIJKLMNOPQRSTUVWXYZ ,./ ?;':"[]{}\~`</text>
<text><b>Bold</b></text>
<inputtext>inputtext here</inputtext>
<inputtext multiline="true" height="100" width="100">hello there</inputtext>
<inputtext>Chevara</inputtext>
<text><u>Underline</u></text>
</view>
</view>
<scrollbar axis="y"/>
</window>
</canvas>
name String: The name of this LzFont.
style String: The style of this LzFont