Use @font-face in front-end pages to display Web custom fonts "Go"

This article is transferred from W3cplus CSS @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, Many of you may not naturally ask, such things IE can support it? When I told you @font-face This feature back in IE4 you would certainly be surprised. My blog on the use of a lot of such custom Web fonts, such as the homepage of the logo,tags and the handwriting in the page, many friends ask me how to use, can make their own page support such custom fonts, a sentence these are @font-face Implementation of , 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 {      <yourwebfontname>;      <source> [<format>][,<source> [<<<  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:< Span class= "value" >  ' yourwebfontname ';  src: url (format ( ' EoT '); src:url (  ' Yourwebfontname.woff ') format ( ' Woff '), url (format (             

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 (/* 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:

   <class="Neuesdemo" >neues Bauen Demo</h2>   

Define your own web font with @font-face:

@Font-face{Font-family: ' Neuesbauendemo ';Src: Url‘.. /fonts/neues_bauen_demo-webfont.eot ');Src: url (format (url (format ( ' Woff '), url (format (url (format ( ' svg '); font-weight: normal; font-style: normal;                /span>        

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{      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 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 font, so you can download a single 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, 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, 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 (format ( ' Embedded-opentype ') , url (format ( ' Woff '), url (format (url (format (font-weight: normal; font-style: normal;                /span>         

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{     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 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.

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.

March 2014 Update--@font-face can not work in Firefox solution, detailed click: http://stackoverflow.com/questions/2856502/ Css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie

If you want to reprint please indicate the source: W3cplus

Use @font-face in front-end pages to display Web custom fonts "Go"