CSS Web pages use custom font methods

@font-face can load the server-side fonts to the browser side, so that designers can not be limited by the client font library.

In general, there are four types of font files that can overwrite all browsers. These four formats are:

. EOT: Applies to Internet Explorer 4.0+.

. TTF or. OTF: For Firefox 3.5, Safari, Opera.

. SVG: For Chrome, IPhone.

. WOFF: The font format standard specified for Web fonts is widely supported by the new version of the browser.

Syntax + Example: write in CSS as follows

{      font-family: ' afish ';      src: url ('.. /fonts/afish-webfont.eot ');      src: url ('.. /fonts/afish-webfont.eot? #iefix ') format (' Embedded-opentype '),     url (' ... /fonts/afish-webfont.woff ') format (' Woff '),     url ('.. /fonts/afish-webfont.ttf ') format (' TrueType '),     url ('.. /fonts/afish-webfont.svg#afish ' Format (' svg ');      font-weight: normal;      font-style: normal;}

Here is the relative path, of course, you can also use the absolute path. Here we need to apply the defined font to the actual page:

With the font definition above, you can use the Afish font. As follows:

Body {    font-family: afish;     width: 100%;     height: 100%;     color: red;}

To get the font format required for @font-face:
The special font is already in your computer, and now we need to find a way to get the @font-face. Eot,.woff,.ttf,.svg font format. To get these font formats, also need third-party tools or software to implement, below I recommend a tool font Squirrel.

CSS Web pages use custom font methods