font specificationIn CSS1 there was only a simple way of specifying the font to be used for displaying the text of an element. CSS2 introduced the idea of WebFonts, which allows for
Why is it all so complicated?You might be wondering why not just let the developer specify a font using its name, and then specify the characteristics (weight, size and so on). Of course we can do that, but unfortunately, there isn't any simple way of specifying fonts by name. More importantly, what happens when the specified font isn't available? The font specification scheme of CSS2 is more flexible, allowing for a much closer match to the desired font even when it isn't available. How does it work?There are two aspects to the use of fonts in CSS2. Specification by the developer, and Selection by the browser. To aid in the browser's selection of a font, CSS2 introduces the An A simple example of an <html> <head> <title>Font test</title> <style type="text/css" media="screen, print"> @font-face src:url("http://site/fonts/rob-celt")} h1 </style> </head> <body> <h1>This heading is displayed using Robson Celtic</h1> </body> </html> Here the browser will use the downloaded font for headings of level 1. The @font-face ruleAs you might guess from the above, the @font-face { font-family: "Robson Celtic"; src: url("http://site/fonts/rob-celt") } The font descriptors themselves are very similar to the properties of a normal statement, in fact many of them are almost the same. In essence, a descriptor has a name, followed by a colon, then a comma separated list of values. Let's take a look at a more complicated example, then discuss the different types of descriptor in detail. @font-face { font-family: serif; src: local("Palatino"), local("Times New Roman"), local("New York"), local("Utopia"), url("http://somewhere/free/font"); font-weight: 100, 200, 300, 400, 500; font-style: normal; font-variant: normal; font-size: all } This rule suggests that when a serif font is called for, especially when normally styled, and weighted, and at any font size, the browser should use local fonts called Palatino, Times New Roman, etc., and failing that, download the remote font specified by the url. Just what names for descriptors can there be? You'll have already noted the familiar In addition, there are a large number of other descriptor names. These are specialized, and require some understanding of underlying typographical concepts. As such, it's a bit beyond this guide's level of competence. I recommend you take a look at the CSS2 Font Specification, which has a good introduction to many of the important ideas, and full coverage of the different types of descriptor. Browser supportDetailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table. next: generated content(C)1997-2001 Western Civilisation Pty. Ltd. |