12. WCSS Font and Text Properties

Preferences - Do not show ads

For mobile Internet site developers, the WCSS properties that everyone has to deal with is probably the font and text properties, since every kind of mobile Internet application needs to display text, and very often the text has to be displayed in varied styles and sizes.

XHTML MP itself has provided a number of tags that can help change the font style and size. For example, to display some text in bold type, you can use the <b></b> tag pair; to display some text in italics, you can use the <i></i> tag pair; to display some text in a smaller font size, you can use the <small></small> tag pair. (The <b>, <i>, <small> and a few more tags are discussed in the "Font Style in XHTML MP" section of our XHTML MP tutorial. You may take a look if you are interested in them.)

However, using these XHTML MP tags will cause the presentation details to be mixed up with the content and this is not desirable in many situations. For example, let's say you make use of the <b> tag to specify the bold font style to all level-1 headings on your mobile Internet site (i.e. <h1><b>...</b></h1>). Later if you have to remove the bold font style, you need to change every "<h1><b>...</b></h1>" to "<h1>...</h1>", which is very troublesome.

The font properties defined in WAP CSS provide mobile Internet site developers more control over the font name, font size and font style of an element. In the past you cannot specify such details with WML, but now you can do this with WAP CSS. However, note that the fonts available in many mobile devices are quite limited, which means the style you specified may not be supported in the actual mobile device. For example, let's say you specify the Arial font to a paragraph of text. If the Arial font cannot be found on a mobile phone, the mobile phone browser will display the text using an alternative font.

Previous Page Page 15 of 39 Next Page

Contents at a Glance (Click Here for Full Table of Contents)
Print this Web Page | | Back to Top

Feedback Form (Expand)

What do you think about this web page?

WCSS Tutorial Table of Contents WCSS Tutorial Contents at a Glance Preferences - Change Color Scheme Preferences - Do Not Show Ads Previous Page Next Page