CSS3 's @font-face---never have to be forced to use web-safe fonts anymore.

1, @font the appearance of-face
Before the CSS3, we give the Web page design font can only set web-safe fonts, so that our web page performance seems to be like that, then if we want to set the font for the Web designer fonts? No problem, @font-face in CSS can help you solve this problem. The principle is that by storing the font file to the server, and then automatically downloaded to the user's computer when needed, the disadvantage: This font seems to be a charge, may affect the loading speed, but at today's speed, for the United States loading speed can be negligible

2, @font the use of-face
@font-face How to use this property? That is, what is its grammar? See

From the above syntax, you can see that @font-face a minimum of two parameters, one is you give you the name of the added font, such as the founder of the black, a server font URL, some of the following settings can not be used, because the other CSS properties can be done, the effect is better than this.

@font-face{font-family:abc;/* defines the font name */src:url (' ABC. TTF ');} HTML {FONT-FAMILY:ABC}; Set your document as your registered font

So you can reach the font you want to use.

3, what about compatibility? (Browser support)

Firefox, Chrome, Safari, and Opera support. TTF (True type Fonts) and. OTF (OpenType Fonts) types of fonts.

Internet Explorer + + supports the new @font-face rules, but only the. EoT type of font (Embedded OpenType) is supported.

IE8 and earlier versions do not support @font-face properties

For compatibility, in the test, really can not distinguish between the type of font, but in the standard browser, I use the TTF type font, can show its style, in IE9 + below the effect is not very good, a bit messy, and then summed up, but found a can generate fonts of the site, On the recommended website below, this will not show

Reference article:

CSS3 @font-face

CSS3 's @font-face---never have to be forced to use web-safe fonts anymore.