Drawing text with different fonts

A screenshot follows a trimmed down project file for Version 3.0 of Smart Mobile Studio, which demonstrates drawing on a Paintbox with different font faces and styles. (You can use the same graphics code in the PaintView procedure of a canvas project).

If you need to display a character that you cannot type, find a page such as this one that displays it and copy the character into your code.

<SMART>
  <Project version="3" subversion="0">
    <Name>FontsIncludedFiles</Name>
    <Options>
      <Compiler />
      <Codegen>
        <Obfuscation>1</Obfuscation>
        <MainBody>1</MainBody>
        <CodePacking>1</CodePacking>
        <SmartLinking>1</SmartLinking>
      </Codegen>
      <ConditionalDefines />
      <Linker>
        <CompressCSS>1</CompressCSS>
        <ExternalCSS>1</ExternalCSS>
        <Theme>default.css</Theme>
        <CustomTheme>0</CustomTheme>
        <EmbedJavaScript>1</EmbedJavaScript>
      </Linker>
      <Output>
        <HtmlFileName>Fonts.html</HtmlFileName>
        <OutputFilePath>www\</OutputFilePath>
      </Output>
      <Import />
      <Execute />
    </Options>
    <Files>      
      <File type="unit">
        <Name>uFonts</Name>
        <Source>
          <![CDATA[unit uFonts;

interface

uses
  Pseudo.CreateForms, System.Types, SmartCL.System, SmartCL.Components, SmartCL.Forms, SmartCL.Application;

type
  TApplication  = class(TW3CustomApplication)
  end;

implementation

end.]]>
        </Source>
      </File>
      <File type="form">
        <Name>Form1</Name>
        <Source>
          <![CDATA[

unit Form1;

interface

uses 
 SmartCL.System, SmartCL.Graphics, SmartCL.Controls, SmartCL.Components, SmartCL.Forms, 
     SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, System.Types;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
  protected
    procedure InitializeObject; override;
  end;

implementation

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  W3PaintBox1.OnPaint :=
    procedure(Sender: TObject; Canvas: TW3Canvas)
    begin
      Canvas.FillStyle := '#FFFFFF';
      Canvas.FillRectF(0, 0, W3PaintBox1.Width, W3PaintBox1.Height);
      Canvas.FillStyle := 'blue';

      Canvas.FontStyle := '12px Times';
      Canvas.FillTextF('12px Times', 50, 20, MAX_INT);

      Canvas.FontStyle := 'bold italic 12px Times';
      Canvas.FillTextF('bold italic 12px Times', 50, 40, MAX_INT);

      Canvas.FontStyle := '12pt Times';
      Canvas.FillTextF('12pt Times', 50, 60, MAX_INT);

      Canvas.FontStyle := 'bold 12pt Times';
      Canvas.FillTextF('bold 12pt Times', 50, 80, MAX_INT);

      Canvas.FontStyle := 'italic 12pt Times';
      Canvas.FillTextF('italic 12pt Times', 50, 100, MAX_INT);

      Canvas.FontStyle := '12pt verdana';
      Canvas.FillTextF('12pt vardana', 50, 120, MAX_INT);

      Canvas.FontStyle := 'italic 12pt verdana';
      Canvas.FillTextF('italic 12pt verdana', 50, 140, MAX_INT);

      Canvas.FontStyle := 'bold 12pt verdana';
      Canvas.FillTextF('bold 12pt verdana', 50, 160, MAX_INT);

      Canvas.FontStyle := '12pt arial';
      Canvas.FillTextF('12pt arial', 50, 180, MAX_INT);

      Canvas.FontStyle := 'bold 12pt arial';
      Canvas.FillTextF('bold 12pt arial', 50, 200, MAX_INT);

      Canvas.FillTextF('italic 12pt arial', 50, 220, MAX_INT);

      Canvas.FontStyle := 'bold italic 12pt arial';
      Canvas.FillTextF('bold italic 12pt arial', 50, 240, MAX_INT);

      Canvas.FontStyle := 'small-caps 12pt arial';
      Canvas.FillTextF('small-caps 12pt arial', 50, 260, MAX_INT);
    end;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

]]>
        </Source>
        <Design>
          <![CDATA[<?xml version="1.0" encoding="utf-16"?>
<Form version="3" subversion="0">
  <object type="TW3Form">    
    <StyleClass>TW3Form</StyleClass>
    <Name>Form1</Name>
    <object type="TW3PaintBox">
      <Width>400</Width>
      <Top>32</Top>
      <StyleClass>TW3PaintBox</StyleClass>
      <Left>32</Left>
      <Height>400</Height>
      <Name>W3PaintBox1</Name>
    </object>       
  </object>
</Form>]]>
        </Design>
        <AutoCreate>
          <IsAutoCreate>1</IsAutoCreate>
          <IsMainForm>1</IsMainForm>
          <Order>1</Order>
        </AutoCreate>
      </File>
     <File type="main">
        <Name>FontsApplication</Name>
        <Source>
          <![CDATA[uses uFonts, Form1;
  var Application := TApplication.Create;
  Application.RunApp;
]]>
        </Source>
      </File>      
    </Files>
    <Target>Browser</Target>
    <Generator>Visual Components Project</Generator>
  </Project>
</SMART>

Screenshot of output