Go CSS3 @font-face

@font-face is css3 in a module, he is mainly to define their own web fonts embedded in your Web page, with the @font-face module, we use fonts in the development of web, not afraid to use only the Span lang= the "en-us" xml:lang= "en-US" >web security fonts, many of you may not naturally ask, such things ie can support it? When I told you that @font-face This feature was earlier in ie4 support you will certainly be surprised. My blog used many of these custom web fonts, such as the logo,tags as well as handwritten English body on the page, many friends asked me how to use, You can make your own page also support such custom fonts, one sentence these are @font-face Implementation, In order to let more friends know how to use him, today I mainly put their own a little learning process to share with you.

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

@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, which 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,avg, 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, here's a question about the font format, because different browsers are inconsistent with font formatting support, so it's important to know what fonts are supported by various versions of the browser, The front also simple to bring about the font of several formats, the following I will say this question, let us have a concept:

First, 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) format:

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+ ";

Four, 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+";

Five, 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+".

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

To make @font-face reach more browser support,Paul Irish wrote a unique @font-face syntax called bulletproof @font-face:

@font-face {

font-family: ' Yourwebfontname ';

Src:url (' Yourwebfontname.eot? ') format (' EoT ');

Src:url (' Yourwebfontname.woff ') format (' Woff '), url (' Yourwebfontname.ttf ') format (' TrueType ');

}

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

@font-face {

font-family: ' Yourwebfontname ';

Src:url (' Yourwebfontname.eot ');

Src:url (' Yourwebfontname.eot #iefix ') format (' Embedded-opentype '),

URL (' yourwebfontname.woff ') format (' Woff '),

URL (' Yourwebfontname.ttf ') format (' TrueType '),

URL (' yourwebfontname.svg#yourwebfontname ') format (' SVG ');

}

Said so many empty theoretical knowledge, everyone must have a snack itch, then we first look at the W3cplus homepage in the navigation section of the blue font is how to achieve, if we have a dom tag, we need to apply custom font:

HTML Code:

<H2 class= "Neuesdemo" >neues Bauen demo

define your own Web font by @font-face:

@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:

H2.neuesdemo { font-family: ' Neuesbauendemo ' }

Effect:

See the above effect, I think we will feel @font-face is very magical, but also want to struggle to do look, but a hands-on only found that special font I how to get, those . Eot,.woff,.ttf,.svg How do you get those font formats? Some friends may not know how to handle the hand, then we take these questions to a complete example of the full:

First, get special fonts:

Let's take this single Malta font:

To get a single Malta font, there are two ways, one to find paid websites to buy fonts, the other is to the free site download fonts. Of course to give money this stupid I think we will not do, then we will get free places to download, where there? 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, this demo uses the dafont.com single Malta fonts so that you can download single Malta here:

Once the single Malta is downloaded, it needs to be decompressed:

Second, Access @font-face desired font format:

The special font is already in your computer, and now we need to find a way to get @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 recommend a tool I commonly used fontsquirrel, other than the first to say, the first with me point here to enter the interface below it.

If you do not see the page, you can directly click the navigation :

If you see the above interface, it is good to do, we see how to use this tool to generate @font-face needs of the various fonts, first upload the fonts we just downloaded:

After uploading, follow the instructions below:

Now that the files downloaded from the Font squirrel have been saved on your local computer, then as soon as you unzip him, you will see a list of the files as follows:

You can see, extract the file format, in addition to @font-face the required font format, but also with a demo file, if you are not clear can also refer to the download of the demo file, I am not here to explain the demo problem, I am mainly to show you how to use the downloaded files valuable to our project.

For example, a fontface project was created on its own premises:

To make the project structure clearer, we created a separate fonts directory in the project to place the desired font format for extracting the extracted @font-face:

Now @font-face The required font has been loaded into the local project, now the STYLE.CSS in the local project is appended with the @font-face style we need

@font-face { font-family: ' Singlemaltaregular '; Src:url ('.. /fonts/singlemalta-webfont.eot '); Src:url ('.. /fonts/singlemalta-webfont.eot? #iefix ') format (' Embedded-opentype '), URL ('.. /fonts/singlemalta-webfont.woff ') format (' Woff '), URL ('.. /fonts/singlemalta-webfont.ttf ') format (' TrueType '), URL ('.. /fonts/singlemalta-webfont.svg#singlemaltaregular ') format (' SVG '); Font-weight:normal; Font-style:normal; }

So far, we've been customizing the desired Singlemalta font by @font-face, and it's only one step away from the final effect, which is to apply your own defined fonts to the DOM elements in your Web:

H2.singlemalta { font-family: ' Singlemaltaregular ' }

Effect:

See the above effect, then everyone will know that we have achieved success. So about @font-face to help you create a special effect of the font, here is basically finished, I need to remind the user here:

1, if your project is an English site, and the project Logo,tags and other applications to more of this special font effect, I suggest you do not use the picture effect, and use @font-face, but you are Chinese site, I think it is more appropriate to use the picture, Because loading English fonts and pictures does not make much difference, but you load the Chinese font, it is not the same, because the Chinese font is too large, this will affect the performance of the project optimization;

2. Fatal error, when you define in @font-face, the file path is not loaded;

3. You define only @font-face, but not on DOM elements in your project;

The above points are often produced in the usual problems, I hope we can small meaning some, and we have no way to buy all the fonts, even if you are strong, there is no way to put all the fonts you need on a server host. So I give you a few free fonts to download the URL:webfonts,typekit,kernest,google Web Fonts,kernest,dafont,niec Web Type, or you click here There will be more free fonts. The first few links are to help you get some beautiful weird special fonts, but the following tool is infinitely bigger, he can help you generate @font-face the various fonts required, this tool is the font Squirrel.

Finally, in a reminder, use @font-face something else can be forgotten, but Font Squirrel never forget, because he can help you build @font-face The various font formats that are required.

To this about @font-face on the introduction, do not know people like it, if you like it quickly hands-on practice, there is a blog can be applied immediately, can also dazzle a bit.

Go CSS3 @font-face