@ Font-face

This method directly references the font, provided that the referenced font exists. Some fonts need to be replaced by images.

@ Font-face syntax rules:

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

 Value description

1. yourwebfontname: indicates 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:" yourwebfontname ";"

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.

Speaking of browser compatibility with @ font-face, a font format problem is involved here, because different browsers have different support for the font format, so you need to know about it, what kind of fonts are supported by browsers of various versions, and several fonts are also included in the front. Let me talk about this question separately, so that everyone has a concept in mind:

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 enable @ font-face to support more browsers, 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*/   }

However, to support multiple browsers, 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 */   }

After talking about so many empty theoretical knowledge, everyone must be a bit itchy. Let's take a look at how the blue font in the navigation section of the w3cplus homepage is implemented, if we have such a DOM tag, we need to apply the Custom font:

HTML code:

Use @ font-face to define your own web font:
@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;  }
Here I use relative paths. Of course, you can also use absolute paths. Here we need to apply the defined font to our actual page:
h2.neuesDemo {      font-family: 'NeuesBauenDemo'   }
 1. Get Special fonts:
To get the single Malta font, there are two ways: one is to find the paid website to buy the font, and the other is to download the font to the free website. Of course, I don't think everyone will do this kind of silly thing, so we will get a free download. Where can we find it? I usually go to Google Web Fonts and dafont.com to find the fonts I need. Of course, there are other places to download the fonts on the Internet. This demo uses the single Malta font of dafont.com, in this way, you can download single Malta here:
2. Obtain the font format required by @ font-face:
The special fonts are already in your computer. Now we need to find a way to get the. EOT,. woff,. TTF,. SVG font formats required by @ font-face. To obtain these font formats, we also need third-party tools or software to implement them. I recommend a commonly used tool, fontsquirrel.
Here, I want to remind users:
1. If your project is an English website, and the Project logo and tags are applied to many of these special fonts, I suggest you do not use image effects, while using @ font-face, but you are a Chinese website, I think it is more appropriate to use images, because loading English fonts and images is not much different, but you load Chinese fonts, that's different. Because the Chinese font is too large, it will affect some performance optimization of the project;
2. Fatal error. When you define in @ font-face, the file path does not contain an object;
3. You only defined @ font-face, but it is not applied to the DOM element in your project;
Original article:Http://www.w3cplus.com/content/css3-font-face
Demo:Http://blog.snowinmay.net/test/font.html