Setting Specific
Font Names or Generic Font Family Names (font-family Property)
To
set a specific font name or a generic font family name to some text,
you need to use the font-family WCSS property. Here is an
example that illustrates its use:
p
{font-family: Arial, Helvetica, sans-serif}
In
the above example, "Arial" and "Helvetica" are
specific font names and "sans-serif" is a generic font
family name. The style statement tells the WAP browser to use the
Arial font to display text enclosed in <p></p> tags. If
the Arial font is not available on the mobile device, the WAP browser
will use the Helvetica font. If both the Arial font and the Helvetica
font are not available, the WAP browser will try to find a font that
belongs to the sans-serif font family on the mobile device. If such a
font is found, the text will be displayed with it. Otherwise, the WAP
browser will choose an alternative.
It
is a good practice to include one generic font family name at the end
of the font list.
If
a font name consists of more than one word (i.e. the font name
contains whitespaces), you have to enclose it within single quotes or
double quotes. Here are some WAP CSS examples that illustrates this:
p
{font-family: "Times New Roman"}
<p
style="font-family: 'Times New Roman'">
...
</p>
Five
generic font family names are accepted by the font-family
property. They are serif,
sans-serif, monospace, cursive and fantasy.
Some example fonts of each generic font family are shown in the
following table. Note that these five generic font family names are
keywords and they should not be enclosed within single quotes or
double quotes.
|
Generic
Font Family Names
|
Example
Fonts
|
|
serif
|
Times
New Roman
|
|
sans-serif
|
Arial,
Helvetica
|
|
monospace
|
Courier
|
|
cursive
|
Zapf-Chancery,
Caflisch Script
|
|
fantasy
|
Western,
Critter
|
It
is important to note that there is no guarantee that a certain mobile
device will contain at least one font for each generic font family.
The
screenshots of the following XHTML MP/WAP CSS example will give you
some idea about the look of each of the five generic font families in
WAP browsers.
(fontFamilyEg1.xhtml)
<?xml
version="1.0"?>
<!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Generic
Font Families</title>
</head>
<body>
<p
style="font-family: serif">Serif</p>
<p
style="font-family: sans-serif">Sans-serif</p>
<p
style="font-family: monospace">Monospace</p>
<p
style="font-family: cursive">Cursive</p>
<p
style="font-family: fantasy">Fantasy</p>
</body>
</html>
|
Nokia
Mobile Browser 4.0
|
|
Feedback Form (ExpandCollapse)
|
|
