In the past, modifying the font of a web page usually meant nesting relevant text into the <tag> tag and using attributes to control its color, size and style. Today, this approach is no longer recognized because it mixes visual style with actual content markup. Today we recommend the method of concentrating font style information into a separate file called a Cascading Style Sheet (CSS).
Concentrating font information into a single CSS file has many obvious advantages: it is easy to operate, does not require any special software, and works uniformly in most major browsers. What's more, since the information is centralized in a single location, it's easy to modify the visual appearance of a web page: you can simply change the font or color of the main style sheet, and the changes will instantly "cascade" throughout your entire site.
Sounds fun, right? So please read on because in this article I will discuss the CSS font property, which is designed to replace the old <font> element. If you need centralized control over the font, color, text size and spacing of your HTML page, it is A powerful tool to take advantage of.
control type
The font attribute defines the font used by the corresponding element. This property usually contains a comma-separated list of font names; names containing whitespace can be enclosed in quotes. When applied, the browser will use the first font it finds in the list, or the default standard browser font if no valid font is found.
Listing A is an application example of this instruction:
List A
<html> <head> <style type="text/css"> .quote { font-family: "Bookman Old Style", "Verdana"; } </style> </head> <body> <div class="quote">To be or not to be, that is the question.</div> </body> </html> |
Figure A shows the output.
Figure A
Font_family
It's important to remember that this directive is very dependent on the fonts displayed by the client system; in the above example, if the system does not display the Bookman Old Style and Verdana fonts, the default browser font will be used. To avoid this problem, it is best to add a list of generic font names, such as serif, sans-serif, or cursive, after the list of special font names; this tells the browser to use the best matching font in that font class. Listing B is a revised version of the above example that exactly solves the above problem.
List B
<html> <head> <style type="text/css"> .quote { font-family: "Bookman Old Style", "Verdana", "cursive"; } </style> </head> <body> <div class="quote">To be or not to be, that is the question.</div> </body> </html> |