CSS @ font-face for Web page design custom web page fonts

CSS for Webpage Design @ font-face application @ font-face in Webpage font custom CSSHe mainly embeds the web font he defined Into Your webpage.@ Font-faceThe emergence of modules, we use fonts in web development, not afraid to only use Web security fonts, many of you may not naturally ask, can such a thing be supported by IE? When I tell you@ Font-faceYou will be surprised that this feature has been supported as early as ie4. My blog uses many such custom web fonts, such as the logo of the homepage, tags, and handwritten English style on the page. Many friends asked me how to use them, allows your pages to support such custom fonts.@ Font-faceTo let more friends know how to use it, I will share my learning process with you today.

Let's take a look at the syntax rules of @ font-face:

@ Font-face {

Font-family: <Yourwebfontname>;

SRC: <Source> [<format>] [, <source> [<format>] *;

[Font-weight: <Weight>];

[Font-style: <Style>];

}

Value description

Yourwebfontname: This value refers to your Custom font name. It is best to use the default font you downloaded and it will be referenced to the font-family in your Web element. For example, "font-family:" yourwebfontname ";" Source: This value refers to the storage path of your Custom font, which can be a relative path or a absolute path; 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;
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.

Compatible with browsers

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:

<H2class = "neuesdemo"> Neues bauen demo </H2>

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'

}

Effect:

Seeing the above results, I think everyone will feel that @ font-face is amazing, and they also want to do what they want to do, but they only find that what can I do with special fonts. EOT ,. woff ,. TTF ,. how can we obtain the SVG font formats? Some friends may not know how to run the game, so let's take these questions to a complete instance:

1. Get Special fonts:

Let's use the single Malta font below:

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 fonts on the Internet. This demo uses single of dafont.com.
Malta font, so you can download single Malta here:

After downloading single Malta, extract it:

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. I would like to recommend a commonly used tool, fontsquirrel, click here to go to the following interface.

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

If you see the interface above, it's easy to do. Let's take a look at how to use this tool to generate various fonts required by @ font-face. First, upload the font we just downloaded:

Perform the following operations after uploading:

Now, the file downloaded from font squirrel has been saved on your local computer. After decompression, you can see the following list of files:

As you can see, the decompressed file format contains a demo file in addition to the font format required by @ font-face, if you do not know, you can refer to the downloaded demo file. I will not describe the problem here, I will mainly introduce how to apply the downloaded files to our project.

For example, you have created a fontface project locally:

To make the project structure clearer, we create a separate fonts directory in the project to store the font format required for decompressing @ font-face:

Now, the words @ font-faceneed have been written to the corresponding project. Now, the style.css in the corresponding project contains 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 have used @ font-face to customize the desired singlemalta font, which is only one step behind the final effect, apply the defined font to the DOM elements in your web:

H2.singlemalta {

Font-family: 'Singlemaltaregular'

}

Effect:

When we see the above results, we will know that we have achieved success. So the @ font-face helps you create fonts with special effects, which is basically done here. Here I need 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;

The above points are common problems in normal production. I hope you will be able to make a small contribution. In addition, we cannot purchase all fonts. Even if you are strong enough, there is no way to place the fonts required by all your projects on a server host. Therefore, I will provide you with several free fonts for download: webfonts, typekit, kernest, and Google.
Web Fonts, kernest, dafont, and Niec web type. The previous links help you get some beautiful and weird special fonts. However, the following tool is even more powerful, it can help you generate various fonts required by @ font-face. This tool is font.
Squirrel.

Finally, I would like to remind you that you can forget to use @ font-face, but font squirrel cannot be forgotten because it can help you generate various font formats required by @ font-face.