Web Fonts

Web Fonts are fonts stored on the Web server, that are downloadable to the browser along with the Web page. By using Web Fonts, Web page authors will have greater control and flexibility in their Web page's typography. The style declaration to access a Web font is:

@font-face {
font-family: "font_name"; src: url(url)

}

where font_name is the name assigned to the font, and url is the URL of the Web Font file. For example, if you place the following style declaration in the head section of the HTML document:

<style type="text/css">
@font-face {
font-family: "Broadway";
src:=url(http://www.webfonts.com/broadway)
}

you can apply the Broadway Web font to any element in the document. The following code shows how to apply the Broadway font to an h1 heading.

<h1 style="font-family: Broadway">
Home Page
</h1>

The browser will retrieve the Broadway font from the http://www.bitstream.com/webfont/ and then apply it to the h1 heading.

Note that some browsers still do not support Web Fonts, and several font manufacturers have set their fonts to not allow embedding. Thus you may need to provide alternative or generic fonts in addition to the Web fonts you supply.

Additional Font Styles

There are several additional font styles that are not yet widely supported by browsers, but may become more popular in the near future.

The font-stretch style is used to change the width of the characters in the displayed font. The syntax of the font-stretch style is:

font-stretch: type

where type is equal to ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, or ultra-expanded.

The font-size-adjust style provides control over the legibility of the displayed font. Each font has an aspect value, which is the font size divided by the x-height (the height of the "x" character in the font). Generally, fonts with larger aspect values are more legible than fonts with smaller aspect values. The syntax of the font-size-adjust style is:

font-size-adjust: value

where value is the value of the font's aspect value, or the value "none" which allows the default aspect value of the font to be used. When the browser encounters this value, it will attempt to use the font that best matches both the font size and the aspect value (as specified in the font-size-adjust style). This ensures that the chosen font will be as legible as the Web author intends. For example the Verdana font has a default aspect value of 0.58, which means that if the font size is set to 100 pixels, the height of a small letter, "x" will be 58 pixels. On the other hand, Times New Roman has an aspect value of 0.46. This means that text in a Verdana font will tend to remain more legible at smaller sizes than Times New Roman. In addition, Verdana text will look "too big" if substituted for Times New Roman. The figure below shows the effect of modifying the aspect value of the Verdana font to match the Times New Roman font.

The font-effect style can be used to apply special effects to the font. The syntax of this style is:

font-effect: type

where type is none (the default), engrave, emboss, or outline. A value of engrave makes the text appear as though it were engraved into the page. A value of emboss makes the text appear as if it were embossed or lifted out from the page. The outline value, removes the interior color of the text, displaying only the outline of the characters.

Related to the font-effect style is the text-shadow style, which applies a drop shadow to text. The shadow can appear behind and to the left or right of the text—but never in front of the text. The syntax of the text-shadow style is:

text-shadow: color x y blur

where color is the color of the shadow, x is the distance between the shadow and text in the horizontal direction, y is the distance between the shadow and the text in the vertical direction, and blur is the size or blurring of the shadow. Positive x and y values move the shadow to the left and down, while negative values move the shadow to the right and up. The color and blur values are optional. If you do not specify a color value, the color of the text is used. If you do not specify a blur value, the browser will use a default blur. Many fonts do not size well and will appear jagged or pixilated at certain font sizes. The font-smooth style is designed to correct this problem. The syntax of the font-smooth style is:

font-smooth: type

where type is auto (the default) to allow the browser to handle any font smoothing applied to the text, never to prohibit the browser from trying to smooth the font, or to force the browser to always smooth the font.

Setting the Opacity Value

Opacity is defined as the transparency of an image. There are several proposed styles, which are not yet supported in the browser market, to allow Web authors to set the opacity of page elements. The first is the opacity style, which has the syntax:

opacity: value

where value is a number between 0 and 1. A value of 0 (the default) renders the element completely opaque, while a value of 1.0 renders the element completely transparent.

Another proposed style is to add the opacity value to the color value of the element. In this proposal, the rgb color value would be replaced with the color value:

rgba(red, green, blue, alpha)

where red, green, and blue, and the usual values of the red, green, and blue color components, and alpha is the value of the color's opacity. As with the opacity style, an alpha value of 0 (the default) applies an opaque effect to the color, while a value of 1.0 renders the color completely transparent.