Some Questions about @ font-face

@ Font-FACE: loads the font files on the server to display fonts not installed on the client. [Microsoft's ie 5 has started to support this attribute, but only supports Microsoft's own. EOT (Embedded Open Type) format. other browsers have not yet supported this field format. However, since safari 3.1, web page reconstruction engineers have been able to set. TTF (TrueType) and. otf (OpenType) fonts as custom fonts.

@ Font-face syntax rules:

@font-face {      font-family: <YourWebFontName>;      src: <source> [<format>][,<source> [<format>]]*;      [font-weight: <weight>];      [font-style: <style>];}

For example:

@font-face{    font-family:"playericons";    src:url(../font/fontello.eot);    src:url(../font/fontello.eot#iefix) format("embedded-opentype"),    url(../font/fontello.woff) format("woff"),    url(../font/fontello.ttf) format("truetype"),    url(../font/fontello.svg) format("svg");    font-weight:normal;    font-style:normal;}

Parameter description:

Value description

1. Font-family: This value refers to your Custom font name. It is best to use the default font you downloaded. It will be referenced to the font-family in your Web element. For example, "font-family:" playericons ";"

2. Source: indicates the storage path of your Custom font, which can be relative or absolute;

3. Format: This value refers to the format of your Custom font and is mainly used to help the browser identify it. Its Values mainly include TrueType, OpenType, TrueType-AAT, embedded-OpenType, AVG, etc;

4. Weight and style: You must be familiar with these two values. Weight defines whether the font is bold. Style mainly defines the font style, such as italic.

The compatibility of the browser with @ font-face involves a font format problem, because the font formats supported by different browsers are inconsistent.

I. turetpe (. TTF) format:

. The TTF font is the most common font for Windows and Mac, and is a raw format. Therefore, it is not optimized for websites. browsers that support this font include [ie9 +, firefox3.5 +, chrome4 +, safari3 +, opera10 +, IOS Mobile safari4.2 + ];

Ii. OpenType (. OTF) format:

. OTF font is considered to be a primitive font format. It is built on the basis of turetype, so it also provides more features. browsers that support such fonts include [firefox3.5 +, chrome4.0 +, safari3.1 +, opera10.0 +, IOS Mobile safari4.2 + ];

Iii. Web open font format (. woff) format:

. Woff font is the best web font format. It is an open TrueType/OpenType compressed version and also supports the separation of metadata packages. browsers that support this font include [ie9 +, firefox3.5 +, chrome6 +, safari3.6 +, opera11.1 + ];

Iv. Embedded Open Type (. EOT) format:

The. EOT font is a dedicated ie font. You can create this font type from TrueType. browsers that support this font include [ie4 + ];

5. SVG (. SVG) format:

. SVG fonts are based on the SVG font rendering format. browsers that support such fonts include [chrome4 +, safari3.1 +, opera10.0 +, IOS Mobile safari3.2 + ].

This means that in @ font-face, we need at least. woff and. EOT fonts, And even. SVG fonts to support more browser versions.

 

To support more browsers, we suggest writing the example above.

The parameters and syntax are clear. Another question is, where can I obtain the EOT,. woff,. TTF, And. SVG font formats?

Step 1: download the required font at http://www.dafont.com. Open the web page to see at a glance. Select the desired font and download it;

The next step is to get the formats supported by various browsers. The special fonts are already in your computer. Now we need to find a way to get what @ font-face needs. EOT ,. woff ,. TTF ,. SVG font format. To get these font formats, we also need third-party tools or software to implement http://www.fontsquirrel.com/tools/webfont-generator.

After uploading and downloading, decompress the package and you will find:

Open the demo File

We can use it directly. If any errors occur, please correct them.