CSS3 @font-face Detailed usage

@font-face is a module in CSS3, he mainly embeds his own defined Web fonts into your Web page, with the advent of @font-face module, We use fonts in the development of the web without having to worry about using only web-safe fonts! Certainly someone will ask, such things IE can support it? I tell you @font-face This function is actually supported in IE4, you will be surprised. If you see some English websites or blogs see some very beautiful custom web fonts, such as the logo,tags of the homepage and the handwritten English body in the page, these are all @font-face , in order to let more friends know how to use him, Today I mainly put my own a little learning process to share with you.

First, let's take a look at the grammar rules of @font-face:

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

Value Description

1. Yourwebfontname: This value refers to the name of your custom font, preferably using the default font you downloaded (what font to download back, what font name to fill here), and he will be referenced to the font-family in your Web element. such as "font-family:" Yourwebfontname ";"
2. Source: This value refers to the stored path of your custom font, which can be a relative path or an absolute path;
3. Format: This value refers to the formatting of your custom font, mainly used to help the browser to identify the main value of the following types:truetype,opentype,truetype-aat,embedded-opentype,svg , etc.;
4. Weight and style: These two values must be familiar, weight defines whether the font is bold, style primarily defines the font style, such as italic.

Browser compatible

When it comes to browser compatibility with @font-face, there is a problem with the font format, because different browsers are inconsistent with font formatting support, so it's important to understand what kind of fonts are supported by various versions of the browser, and how the fonts are easily brought to the front. Let me say this question separately, so that we have a concept in mind:

One, Turetpe (. ttf) Format:

The . TTF font is the most common font for Windows and Mac, is a raw format, so he is not optimized for websites, and browsers that support this font have "ie9+,firefox3.5+,chrome4+,safari3+,opera10+, IOS Mobile safari4.2+ ";

Second, OpenType (. OTF) Format:

The . OTF font is considered to be an original font format, built on the basis of turetype, so it also provides more features that support browsers with this font have "firefox3.5+,chrome4.0+,safari3.1+, Opera10.0+,ios Mobile safari4.2+ ";

Third, Web Open Font format (. Woff):

The . Woff font is the best format for Web fonts, he is a compressed version of an open Truetype/opentype, but also supports the separation of meta-packages, browsers that support this font have "ie9+,firefox3.5+,chrome6+, Safari3.6+,opera11.1+ ";

Iv. Embedded Open Type (. EoT) Format:

. EoT fonts are IE-specific fonts that can be created from TrueType fonts and browsers that support this font have "ie4+";

V. SVG (. svg) Format:

The . svg font is a format based on SVG font rendering, and browsers that support this font have "Chrome4+,safari3.1+,opera10.0+,ios Mobile safari3.2+".

This means that at least we need to be in the @font-face. Woff,.eot two format fonts , and even require. svg and other fonts to support more than one browsing version.

To enable @font-face to reach more browser support, Paul Irish wrote a unique @font-face syntax called Bulletproof @font-face:

{    font-family: ' yourwebfontname ';     src: url (' yourwebfontname.eot #iefix ') format (' EoT '); /* IE */     src:url (' yourwebfontname.woff ') format (' Woff '), url (' Yourwebfontname.ttf ') format (' TrueType '); /* Non-ie */}

But in order to allow multiple browsers to support, you can also write:

@font-face{font-family:' Yourwebfontname ';src:url (' Yourwebfontname.eot ');/*IE9 Compat Modes*/src:url (' yourwebfontname.eot #iefix ') format (' Embedded-opentype '),/*IE6-IE8*/url (' yourwebfontname.woff ') format (' Woff '),/*Modern Browsers*/url (' yourwebfontname.ttf ') format (' TrueType '),/*Safari, Android, IOS*/url (' yourwebfontname.svg#yourwebfontname ') format (' SVG ');/*Legacy IOS*/}

Said so many empty theoretical knowledge, we must want to try their own hands, example Demo:

HTML Code:

<class= "Neuesdemo">Neues Bauen Demo</H2  >

Define your own web font with @font-face:

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

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

{    font-family: ' Neuesbauendemo '}

Get special fonts:

I usually go to Google Web Fonts and dafont.com to find their own fonts, of course, there are other places on the Internet to download fonts, such as: Webfonts,typekit,kernest,google Web fonts,kernest, Dafont,niec Web Type. The previous few links are special fonts that help you get some beautiful weird!

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, we also need third-party tools or software to implement, below I would like to recommend a tool I commonly used Fontsquirrel, Link: http://www.fontsquirrel.com/tools/webfont-generator

Using this online font format Generation tool, we only need to upload a font format that we have downloaded back to create other. eot,.woff,.ttf,.svg font formats

CSS3 @font-face Detailed usage