CSS: Fonts - W3C

Có thể bạn quan tâm

Font families

After the color, the font is probably the most basic property of a page. On this page I won't show any "tricks," but I will show the range of font variations that CSS allows.

Since not all fonts are available on all computers (there are thousands of fonts, and most are not free), CSS provides a system of fallbacks. You list the font that you want first, then any fonts that might fill in for the first if it is unavailable, and you should end the list with a generic font, of which there are five: serif, sans-serif, monospace, cursive and fantasy.

The following table shows examples of various fonts (your browser may not know all of them) and you can see what your browser does with each of the five generic ones:

Font family	Your browser	Sample image
'sans-serif': normal fonts without serifs
Arial, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Verdana, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Trebuchet MS, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Gill Sans, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Noto Sans, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Optima, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Arial Narrow, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
'serif': normal fonts with serifs
Times, Times New Roman, serif	The Quick Brown Fox Jumps Over The Lazy Dog
Didot, serif	The Quick Brown Fox Jumps Over The Lazy Dog
Georgia, serif	The Quick Brown Fox Jumps Over The Lazy Dog
Palatino, URW Palladio L, serif	The Quick Brown Fox Jumps Over The Lazy Dog
Bookman, URW Bookman L, serif	The Quick Brown Fox Jumps Over The Lazy Dog
New Century Schoolbook, TeX Gyre Schola, serif	The Quick Brown Fox Jumps Over The Lazy Dog
American Typewriter, serif	The Quick Brown Fox Jumps Over The Lazy Dog
serif	The Quick Brown Fox Jumps Over The Lazy Dog
'monospace': fixed-width fonts
Andale Mono, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
Courier New, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
Courier, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
FreeMono, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
OCR A Std, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
DejaVu Sans Mono, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
monospace	The Quick Brown Fox Jumps Over The Lazy Dog
'cursive': fonts that emulate handwriting
Comic Sans MS, Comic Sans, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Apple Chancery, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Bradley Hand, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Brush Script MT, Brush Script Std, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Snell Roundhand, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
URW Chancery L, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
cursive	The Quick Brown Fox Jumps Over The Lazy Dog
'fantasy': decorative fonts, for titles, etc.
Impact, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Luminari, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Chalkduster, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Jazz LET, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Blippo, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Stencil Std, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Marker Felt, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Trattatello, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
fantasy	The Quick Brown Fox Jumps Over The Lazy Dog