Make Web fonts: CSS3 @font-face

@font-face is a module in CSS3, he is mainly to embed their own definition of Web fonts in your Web page, with the advent of @font-face module, we use fonts in the development of the web is not afraid to use only web-safe fonts, In addition @font-face This function as early as IE4 support, such as the home page of the logo,tags and the handwriting in the pages of English body These can be used @font-face to achieve.

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

@font-Face{      font-family: <yourwebfontname>;       <source> [<format>][,<source> [<format>]]* ;      [Font-weight: <weight>];      [Font-style: <style>];    }

Value Description

1, Yourwebfontname: This value refers to your custom font name, preferably using the default font you downloaded, he will be referenced to your web elements in the font-family. such as "font-family:" Yourwebfontname ";"

2, Source: This value refers to your custom font storage path, can be a relative path can also be the absolute path;

3, Format: This value refers to the format of your custom font, mainly used to help the browser to identify, the value of the following main types: Truetype,opentype,truetype-aat,embedded-opentype,avg, etc.;

4, weight and style: These two values must be very familiar to everyone, weight defines whether the font is bold, style mainly 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 a turetype basis, so it also provides more functionality, and browsers that support 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, and 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-Face {font-family:'Yourwebfontname'; Src:url ('Yourwebfontname.eot?') 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*/   }

HTML Code:

class="mod_title">lobster-regular
Define your own web font with @font-face:
@font-Face {font-family:'Lobsterregular'; Src:url ('Css/lobster-regular-webfont.eot'); Src:url ('css/lobster-regular-webfont.eot? #iefix') Format ('Embedded-opentype'), url ('Css/lobster-regular-webfont.woff') Format ('Woff'), url ('Css/lobster-regular-webfont.ttf') Format ('TrueType'), url ('Css/lobster-regular-webfont.svg#lobsterregular') 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:
. mod_title{font-family:"lobsterregular"; font-size:25px;}
The effect is:
See the above effect, I think everyone will feel @font-face is very magical, those. Eot,.woff,.ttf,.svg How do you get these font formats? Here's a complete example of these issues:
First, get special fonts:
To get lobsterregular fonts, 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 download fonts on the Web, this demo uses the dafont.com single Malta font, so you can download here:
After downloading it, you need to unzip it:
Second, 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 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 see the above interface, that's good, let's see how to use this tool to generate the various fonts required by @font-face, first upload the fonts we just downloaded:
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:
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, otherwise you click here will have 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 to generate the various fonts required by @font-face, this tool is the font Squirrel.
Finally, in a reminder, use @font-face other can forget, but the font squirrel must not forget, because he can help you to generate @font-face the various font formats required.
In addition, this with the font library has a certain consistency, you can refer to the M_mbaobao project
Make Web fonts: CSS3 @font-face