Font family (HTML)

From Wikipedia, the free encyclopedia

Jump to: navigation, search
HTML

In HTML and XHTML, a font face or font family is the typeface that is applied to some text.

The font family and other presentational attributes of fonts are applied in HTML code using Cascading Style Sheets (CSS) or the deprecated HTML font element.

<p style="font-family: times, serif">Sample text formatted with CSS.</p>
<p><font face="times, serif">Sample text formatted with the deprecated FONT
tag.</font></p>

It is common for publishers to define a list of font families to use when rendering text. These are listed in preferential order, separated by commas (as can be seen above). In this situation, the term font-family (or, in the case of HTML, face) is often misunderstood to mean the collection of possible fonts to use when rendering the text (be it on screen, on a printer or otherwise). In fact the list is that of several different font families, each family being of similar fonts. Thus the Times family includes different styles (like roman and italic), and weight (like regular and bold). The last family specified is usually one of the five generic families defined in HTML and CSS, to allow the text to be rendered appropriately even if the specified fonts are not available on that system.

Contents

[edit] CSS generic font families

The generic font families defined in HTML and CSS are:[1]

Family Example (browser dependent)
serif The quick brown fox jumps over the lazy dog.
sans-serif The quick brown fox jumps over the lazy dog.
cursive The quick brown fox jumps over the lazy dog.
fantasy The quick brown fox jumps over the lazy dog.
monospace The quick brown fox jumps over the lazy dog.

Under Windows API, these families are identified as Roman, Swiss, Script, Decorative, and Modern, respectively.

[edit] Generic font

The font-family can use a specific named font (like Heisei Mincho W9) but the result depends on the installed fonts in the user machine. Font names must be quoted if containing whitespaces. The actual appearance will depend on your browser and the fonts installed on your system.[1] A default installation of Microsoft's Internet Explorer, for instance, always displays serif and Times as Times New Roman, and sans-serif and Helvetica as Arial.

[edit] Notes

  1. ^ a b http://www.w3.org/TR/CSS2/fonts.html#generic-font-families

[edit] See also

Font Example (dependent on installed fonts)
Times New Roman The quick brown fox jumps over the lazy dog.
Roman The quick brown fox jumps over the lazy dog.
Garamond The quick brown fox jumps over the lazy dog.
Palatino The quick brown fox jumps over the lazy dog.
Antiqua The quick brown fox jumps over the lazy dog.
Minion The quick brown fox jumps over the lazy dog.
Helvetica The quick brown fox jumps over the lazy dog.
Swiss The quick brown fox jumps over the lazy dog.
Impact The quick brown fox jumps over the lazy dog.
Script The quick brown fox jumps over the lazy dog.
Decorative The quick brown fox jumps over the lazy dog.
Blackletter The quick brown fox jumps over the lazy dog.
Fraktur The quick brown fox jumps over the lazy dog.
Comic Sans The quick brown fox jumps over the lazy dog.
Modern The quick brown fox jumps over the lazy dog.
Courier The quick brown fox jumps over the lazy dog.
Calibri The quick brown fox jumps over the lazy dog.
Verdana The quick brown fox jumps over the lazy dog.
Frosty The quick brown fox jumps over the lazy dog.
Georgia The quick brown fox jumps over the lazy dog.
Personal tools
Languages