Learning JavaScript

Fonts and Text

One of the first presentation-specific HTML elements was font, and it’s also one of the older HTML elements you still find, all too frequently, in web pages. It’s not surprising that font and text properties were of such interest in building web pages. Few changes you can make to an element’s style attributes can have such an effect as changing the text or font properties.

Notice I say text or font properties. The font has to do with the characters themselves: their family, size, type, and other elements of the characters’ appearance. The text attributes, though, have more to do with decoration attached to the text and include text decoration, alignment, and so on.

Font Style Properties

There are several style attributes for fonts. Their CSS name and the associated JavaScript-accessible style attribute are given in the following list:

font-family

Access it as fontFamily in JavaScript. This adjusts the font family (such as Serif, Arial, Verdana) for the font. When specifying a multiword font family, type the family name exactly; this includes spaces.

font-size

Access it as fontSize in JavaScript. This sets the size of the font. You can use different units when setting the font size. If you use em or pt with the size (such as 12pt or 2.5em), the font is resized according to the web-page reader’s personal settings. If you use px (pixel), the font is maintained at that size regardless of user settings. Specify some unit when setting font-size with JavaScript ...