Import special fonts in Web pages @font-face properties

This article turns to pick Import special fonts in Web pages @font-face properties http://www.w3cfuns.com/thread-5597432-1-1.html(Source: Front-end network (w3cfuns))

In order to facilitate the use of their own to facilitate the special turn to pick

@font-face is a module in CSS3, he is mainly to embed their own defined Web fonts into your Web page, with the advent of the @font-face module, we use fonts in the development of the Web not only use web-safe fonts

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 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-to-@font-face compatibility issues, here is a font format problem, because different browsers on the font formatting support is inconsistent, so it is necessary to understand the various versions of the browser support what kind of font, the front is also simple to bring about the font of several formats , 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 Irishwrote a unique @font-face grammar calledBulletproof @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 */
}
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:

define your own web font with @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 see, but a hands-on only found, special font how can I 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 come toGoogle Web Fontsand thedafont.comlook for the fonts you need, of course, there are other places on the Web to download fonts, this demo usesdafont.comSingle Malta font, so you can download it hereSingle Malta:

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

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, I would like to recommend to you a tool I used toFontsquirrel, the other first don't say more, the first with me dothereGo to the interface below.

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

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:

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:

we can see that the extracted file format, in addition to the @font-face 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 @font-face:

now @font-face the desired font has been loaded into the local project, now the STYLE.CSS in the local project is enclosed 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 customized 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 special effects of the font, here is basically finished, I need to remind users 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 only define the @font-face, but do not apply to the DOM element in your project;
The above points are usually produced in the usual problems, I hope you can be careful some, and we have no way to buy all the fonts, even if you are strong, there is no way to put on a server host all the fonts you need to the project. 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 dotherethere 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 to generate the various fonts required by @font-face, this tool isFont 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.
to this about @font-face on the introduction, do not know people like not to like, if you like to quickly hands-on practice, there is a blog can be applied immediately, can also dazzle a bit.

Import special fonts in Web pages @font-face properties