MODIFYING FONTS USING CSS

Earlier in this lesson, I described a few font-related properties that you can manipulate using CSS. In fact, you can use CSS as a replacement for all the features offered by the <font>tag. Earlier today, I described how the font-family property can be used to specify that text should be rendered in a font belonging to sa particular general category, such as monospace or serif. You can also use the font-family property to specify a specific font, just as you can with the <font> tag.

Fonts are specified in CSS exactly the way they are in the <font> tag. You can provide a single font or a list of fonts, and the browser will search for each of the fonts until it finds one on your system that appears in the list. You can also include a generic font family in the list of fonts if you like, just as you can with the <font> tag. Here are some examples:

<p style=”font-family: Verdana, Trebuchet, Arial, sans-serif”>

This is same-serif text. </p>

<p style=”font-family: courier new, monospace”> this is monospace text. </p>

< style=”font-family: Georgia”> this text will appear in the Georgia font, or, if that font is not installed, the browser’s default font.</p>

You can also use CSS to specify font size. Unfortunately, although the approach for specifying the font face itself is the same whether you’re using the <font> tag or CSS, specifying font sizes under CSS is much more complicated than it is with the <font> as tag. The tradeoff is that with this complexity c9omes a great degree more flexibility in b\how font sizes can be specified. Let’[s start with the basics. To change the font size for some text, the font-size property is used . the value is a size *(relative or absolute) in any of the units of measure supported by CSS.

The catch here is that several units of measure are available. Perhaps the simplest is the percentage size. Relative to the current font size being used. So, to make the font twice as large as it is currently, just use.

<p> this text is normal sized, and this text is

<span style=”font-size: 200%> twice that size</span>. </p>

There are also a number of length units available that you can use to specify the font size are two kinds of length units: relative units and absolute units. Relative units are sized based on the size of other elements on the page and based on the dots per inch setting of the user’s display. Absolute units are sized based on some absolute reference. For example, the pt(point) unit is measured in absolute pixels. To set your text to be exactly 12 pixels high, the following specification is used:

<p style=”font-size:: 12px”> this text is 12 tall. </p>