A deeper understanding of @font face rules in the context of CSS3

A lot of people just mention @font faceRules, the heart will involuntarily "Oh ~ ~" The sound: "This I know, can be used to generate custom characters small icon!" "The problem is that a lot of people think that creating a small character icon is @font faceThe whole of the rules is actually just one of the functions if really understand @font faceRules, you will find that @font faceThe rules can do a lot of things in fact, especially if we don't consider Ie7,ie8 browser case.

First, @font the essence of face is a variable

Although it is said that the CSS3 New World has a real variable var (see this article: "Understanding the CSS/CSS3 native Variable var"), in fact, in the CSS world, there has been something inherently variable, and the @font face rules are one of them, @font The face is essentially a variable that defines a font or set of fonts, which is not just a simple custom font, but also includes word weight naming, default font style settings, and so on.

This "variable" consciousness is very important, helps us to play @font face the potential, can make our CSS code more streamlined, more convenient maintenance and so on.

Before we get to the point, we need to @font face have a general overview of the rules.

@font faceThe CSS attributes supported by the rule are:,,,,,,, font-family src font-weight font-style unicode-range font-variant font-stretch font-feature-settings . For example:

@font-face {  font-family: ' Example ';  Src:url (EXAMPLE.TTF);  Font-style:normal;  Font-weight:normal;  UNICODE-RANGE:U+0025-00FF;  Font-variant:small-caps;  font-stretch:expanded;  Font-feature-settings: "Liga1" on;}

The properties are pretty much, and some properties, it is estimated that he knows you, you do not know him. But from a practical point of view, some attributes can actually be used without having to delve into it, for example, font-variant font-stretch font-feature-settings this 3 property. Why is it? Because in my experience, this 3 attribute gives me a feeling more like it is designed for English, so if there is no business need, you can put it first.

OK, now, is not feeling the pressure is a lot smaller, we need to care about the properties can be customized only left the following:

@font-face {  font-family: ' Example ';  Src:url (EXAMPLE.TTF);  Font-style:normal;  Font-weight:normal;  UNICODE-RANGE:U+0025-00FF;}

It is estimated that there will be small partners wondering what the rules are, @font-face font-style font-weight and unicode-range What the use of these attributes, especially, font-style seems to font-weight come from soy sauce. In fact, each of these properties is not a general, but a story-telling person.

Before introducing each attribute, it is necessary to solemnly declare that there are a large number of cases, all based on local local fonts, and Ie7,ie8 browser does not support the local local font, so the title of this article is "CSS3 background ...", that is why, Attention to discernment, if your project also needs to be compatible with IE8, this article describes, these good things may need to be considered at a discretion.

Second, @font face commonly used CSS Properties detailed introduction

Let's introduce one by one:

1.font-family

Here font-family can be seen as a font variable, the name can be very arbitrary, such as a direct dollar sign '$' , for example:

@font-face {  font-family: ' $ ';  Src:local ("Microsoft Yahei");

At this time, for ordinary HTML elements, you set its font-family property value to '$' , then its font performance becomes "Microsoft Ya Black" (if there is a local font).

Even non-Internet Explorer can be used to directly use pure space ' ' , but one thing to note, is to use these strange characters or a space, you must quote.

Although the variable name can be very arbitrary, but there is a kind of name, not casually set, is the original system has the font name, such as the following code:

@font-face {  font-family: ' Microsoft yahei ';  Src:local (SimSun);}

From then on, "Microsoft Ya Black" font has become "song body". Of course, sometimes we may need this kind of coverage, for example, a new design supervisor, life most like "Microsoft Ya Black", want to change to other fonts, this time we can use this variable overlay to complete the entire site of the font changes easily.

2.src

srcRepresents a call to a font file, not a local font file (ie9+ support), or an online address (there may be a cross-domain limitation).

This article mainly focuses on the application of local font files.

Role 1: Shorthand for font filenames

Now many websites will use "Microsoft Jas Black" font, however, "Microsoft Ya Black" name is a bit long:

. Font {    font-family: ' Microsoft Yahei ';}

Small hand a shake, perhaps misspelled, but also add the quotation marks, but also add a space, good trouble le. At this point we can make use of the @font face rules simplification, so that it is easy to remember, writing faster:

@font-face {  font-family:yh;  Src:local ("Microsoft Yahei");

When using the direct:

. font {    font-family:yh;}

How clean, how refreshing, how comfortable the mood!

srcalso supports multiple local font addresses appearing at the same time, hey, this simplified CSS code is not a font name, but a big wave font name, for example, a website uses a lot of similar font-family property values:

Body {    font-family:pingfangsc-regular,helveticaneue-light, ' Helvetica Neue light ', ' Microsoft Yahei ', Sans-serif;}. xxxx {    font-family:pingfangsc-regular,helveticaneue-light, ' Helvetica Neue light ', ' Microsoft Yahei ', Sans-serif;}

Although said, the implementation of the time, with the help of sass, less tools such as the font names have become variables, writing code seems to have no difficulty, but the resulting CSS is actually more verbose, if we go in essence is the variable @font face , is not only the development of simple, the code is simple, The following processing:

@font-face {  font-family:base;  Src:local ("Helveticaneue-light"), local ("Helvetica Neue Light"), local (  "Pingfang SC"), local ("Microsoft Yahei"), Local (SANS-SERIF);}

So we use the font when the direct:

body {    font-family:base;}. xxxx {    font-family:base;}

Look at the semantics and good, the code is simple, practical and convenient, super use of small tricks.

Of course, the local local role is more than that.

The industry has a Chinese font processing tool called "spider" that extracts special Chinese fonts used in the page and generates new, smaller, custom fonts. We can take a step further on this basis, for example:

Some special title designers like to use the "founder of The Thick song" This font (has been purchased copyright), but obviously, so handsome fonts, almost few users installed, so the actual development, all through the tool to generate a new compact version of the "founder of the song" Font file, and then through src url()The property method chains the font file outside.

Great solution, but not perfect enough, why? Although there are not many users to install the "founder of the song" font, it does not mean that no user is using it. Imagine, if there is a user installed this font, the result you in the page rendering, but also to go outside the chain an additional file address, is not wasted? Waste of traffic, experience is not necessarily good, if the font file load slow, you will see the text "deformation" process, is obviously unfriendly.

We can take advantage of @font face local further improvements in the implementation code and experience in the rules, as follows:

@font-face {  font-family:fzcys;  Src:local ("FZYASONGS-B-GB"),        url ("fzcys.woff2"), url (         "Fzcys.woff"),       url ("Fzcys.ttf");}

Thus, those who installed the "founder of the song" Font of the user, there is no font file request. Loading faster, the user experience has risen, but also save the traffic, so the benefits of nothing harm, but also improper use up.

3.font-style

Under Chrome, @font face rule settings font-style:italic can skew text, but that's not where it works.

@font faceRules font-style and font-weight similar, are used to set the corresponding font style or weight under what font to use. Because some fonts may have special italics, note that the italic word, not to let the shape of the text italic, but rather a specially designed italic font, a lot of details will be different from the physical request. So, when I use the CSS code font-style:italic , it will call the corresponding font, as follows:

@font-face {  font-family: ' I ';  Font-style:normal;  Src:local (' Fzyaoti ');} @font-face {  font-family: ' I ';  Font-style:italic;  Src:local (' Fzshuti ');}

Because the special italic word is not easy to find, so I use "founder Yao Body" and "founder Shu body" instead of making a schematic. The above CSS code I read: The formulation of a font, called 'I' , when the text style is normal, the font expression using "Founder Yao Body", when the text set up font-style:italic , the font expression as "Founder Shu body."

Well, now suppose you have CSS and HTML like the following:

. i {  font-family:i;}

<p><i class= "I" > class name is I, tag is i</i></p><p><span class= "I" > class name is I, label is Span</span ></p>

What is the final performance?

Because the <i> label is natural font-style:italic , so theoretically, the above line of text is expressed as "founder Shu Body", the following behavior "founder Yao Body", the final result is how?

When when, fully compliant, as follows:

Now you should understand what the @font face rules are for font-style .

4.font-weight

font-weightand font-style similar, but the definition of different words to use different fonts, for noon, this is much font-style stronger than the applicability. Here I have a very representative example, the copyright font "Han flag black" is very rich in weight, but this font is not like "Siyuan blackbody", natural can be based on font-weight the value of the property to load the corresponding font file, how to do? Quite simply, redefine it with @font face rules, such as the following CSS code:

@font-face {  font-family: ' QH ';  font-weight:400;  Src:local (' Hyqihei 40S ');} @font-face {  font-family: ' QH ';  font-weight:500;  Src:local (' Hyqihei 50S ');} @font-face {  font-family: ' QH ';  font-weight:600;  Src:local (' Hyqihei 60S ');}

Interpretation is, is a brand-new font, called 'QH' , when the word weight font-weight for 400 The time, the use of "Chinese flag black 40S" word weight font, for 500 the time, use "Han instrument flag black 50S" word weight font, for 600 the time, the use of "Chinese flag black 60S" Word weight font.

Thus, when we apply the following CSS and HTML code:

. hy-40s,
. hy-50s,
. hy-60s {
  font-family: ' QH ';
}
. hy-40s {
  font-weight:400;
}
. hy-50s {
  font-weight:500;
}
. hy-60s {
  font-weight:600;
}

<ul>  <li class= "hy-40s" > Han instrument flag black 40s</li>  <li class= "hy-50s" > Chinese flag Black 50s</li>  <li class= "hy-60s" > Han instrument flag Black 60s</li></ul>

We can see the effect of the text and the thickness of the patchwork, as follows:

If used in web development, will certainly make our interface more delicate, design more exquisite, visual more enjoyable.

5.unicode-range

unicode-rangeThe role of a specific character or character fragment can be used to use a specific font. For example, the effect of the word "Microsoft Jas" font is applied:

However, these two "quotation marks" the gap between the left and right, the direction is unclear, is really looking uncomfortable, at this time we specifically specify these two "quotation marks" using other fonts, the following CSS:

@font-face {  font-family:base;  Src:local ("Microsoft Yahei"); @font-face {  font-family:quote;  Src:local (' SimSun ');      unicode-range:u+201c, u+201d;}. Font {    font-family:quote, BASE;}

And then the effect becomes like this:

Well, it's getting more comfortable all of a sudden.

For unicode-range more information, refer to the article I wrote earlier, "CSS Unicode-range specific characters using Font-face custom fonts."