<font>

Tag for including fonts.

JavaScript: LzFont

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).

Note: An LzFont object represents a named font in a given style. The LzFontManager eservice stores these object. The constructor of this class is for internal use only.

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>
See Also:
Attributes
Name Usage Type (Tag) Type (JS) Default Category
advancetable JS only Array of Number   readonly
  Array of character widths indexed by character codes (typically ASCII).
ascent JS only Number   readonly
  Ascent of this font above the baseline in pixels.
descent JS only Number   readonly
  Descent of this font above the baseline in pixels.
device Tag & JS boolean Boolean   setter
height JS only Number   readonly
  Height of this font in pixels.
lsbtable JS only Array of Number   readonly
  Array of character left-side-bearings indexed by character codes (typically ASCII).
name Tag & JS token String   readonly
  The name of this LzFont.
rsbtable JS only Array of Number   readonly
  Array of character right-side-bearings indexed by character codes (typically ASCII).
src Tag only URL   final
 

The path of a file that contains the source for this object.
style Tag & JS bold | italic | bold italic | italic bold | plain String   readonly
  The style of this LzFont.
toggle JS only Boolean   readonly
  If true, a re-selected element will lose the selection. =============================================================================


Copyright © 2002-2007 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.