12.1. 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.
<?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>
|
Previous Page | Page 16 of 39 | Next Page |
- 1. WCSS (WAP CSS) Introduction
- 2. Wireless CSS and Wireless Profile CSS
- 3. Advantages of Using WAP CSS Style Sheets on Mobile Internet Sites
- 4. Disadvantages of Using WAP CSS Style Sheets on Mobile Internet Sites
- 5. Syntax Rules of WCSS
- 6. Comments in WCSS
- 7. How to Apply WCSS Styles to an XHTML MP Document
- 8. Different Types of Selectors
- 9. Div and Span Element of XHTML MP
- 10. Cascading Rules for Handling Multiple Groups of WCSS Styles Applied to the Same Element
- 11. Common Types of Property Value
- 12. WCSS Font and Text Properties
- 13. WCSS List Properties
- 14. WCSS Color Properties
- 15. WCSS Border Properties
- 16. WAP Specific Extensions to CSS
- 17. WCSS Access Key Extension
- 18. WCSS Input Extension
- 19. WCSS Marquee Extension
- 20. Matching WCSS Cascading Style Sheets to Different User Agents