Analysis on CSS3 's @font face rule

This article mainly introduces the real understanding of the CSS3 background of the @font face rules, with a certain reference value, interested in small partners can refer to

A lot of people as long as a mention @font face rules, the heart will involuntarily "Oh ~ ~" The sound: "This I know, can be used to generate custom characters small icon!" "The thing is, the problem is that a lot of people think that generating small icons is all about @font face rules, actually just one of the features, and if you really understand @font face rules, you'll find that there are a lot of things that @font face rules can do, especially if we don't consider IE7, IE8 in the case of a browser.

First, @font the essence of face is a variable

Although it is said that the CSS3 New World is the real variable var (see this article: "Understanding CSS/CSS3 Native Variable var"), in fact, in the CSS world, there has been essentially variable things, @font face rules is 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, help us to play the potential of @font face, can make our CSS code more streamlined, more convenient maintenance and so on.

Before we get to the point, let's start with a general overview of @font face 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. However, from a practical point of view, some properties can actually not go into the drill, such as Font-variant, Font-stretch, font-feature-settings these 3 attributes. Why is it? Because in my experience, these 3 attributes give me a sense of being designed specifically 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 is the use of the font-style in the-face rule, font-weight and unicode-range these attributes, especially Font-style, font-weight, as if it were specifically 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 native font, and Ie7,ie8 browser does not support local native fonts, so the title of this article is "CSS3 background ...", that is why, everyone attention to discernment , if your project also needs to be compatible with IE8, this article explains that 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:

Font-family

Here the font-family can be seen as a font variable, the name can be very arbitrary, such as direct a 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.

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 use the @font face rules to simplify, so 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!

SRC also 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 like the following 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, 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 it is clear that such a handsome font, 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 the SRC attribute The URL () method is outside the chain of this font file.

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.

Font-style

Under Chrome, @font face rules set Font-style:italic to tilt the text, but that's not what it does.

@font face Rules 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 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:

It should be understood that @font the font-style in the face rule is the right thing to do.

Font-weight

font-weight and 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 use of "Chinese flag black 40S" word weight font, for 500, the use of "Han instrument flag black 50S" word weight font, for 600, 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.

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.

Iii. concluding remarks

According to my personal feeling, @font-face is known to benefit from the icon fonts small icons technology. Because the custom small icon font is almost certainly outside the chain, and exactly good, the lower version of the Ie7,ie8 browser SRC can only be a URL () external font file. The addition of vector, color controllable characteristics, so as to become compatible with the best small icon solution, can not be done, but also brought another drawback, so many students mistakenly think @font-face in addition to custom some small icons are useless. As a result, as more and more products and projects do not need to be compatible with IE7,IE8 browsers, @font-face seems to be rarely mentioned because of the better SVG icon solution.

Through the introduction of this article, we should feel that the role of @font-face rule is seriously underestimated, in addition to the small icon, @font-face can do a lot of things, and these things, it is more like @font-face should do things.

Even if your project needs to be compatible with IE8, some of the features described in this article can be incrementally enhanced, such as special Chinese fonts that prefer local fonts, or unicode-range specific characters using specific fonts.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!