Parsing the @font face rule in the context of CSS3

A lot of people just mention the @font face rule, 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 creating a small character icon is all about the @font face rule, actually just one of the features, and if you really understand the @font face rules, you'll find that there are a lot of things you can do with the @font face rules, especially if we don't consider IE7, IE8 in the case of a browser.

First, @font the essence of face is a variable

Although there is a real variable var in the New world, in fact, in the CSS world, there has been something inherently variable, @font face rule is one of them, @font face is essentially a variable that defines a font or set of fonts, This variable is not just a simple custom font, it also includes the word weight naming, the 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, we need to have a general overview of the @font face rule.

The CSS properties supported by the @font face rules 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 of the properties can not be used to delve into, for example, font-variant,font-stretch,font-feature-settings these 3 properties. 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 a small partner doubts the font-style,font-weight of the @font-face rules and unicode-range the use of these attributes, especially font-style,font-weight, as if they were specifically coming to 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:

　　1. 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 Jas Black" (if there is this font locally).

Even non-IE can be used directly under the "", 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

SRC represents the invocation of a font file, either a local font file (ie9+ support) or an online address (with possible cross-domain restrictions).

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 rule 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!

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 acquired 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, The font file is then chained through the SRC attribute url () method.

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 make further improvements to the code and experience with the local implementation in the @font face rule, 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 rules set Font-style:italic to tilt the text, but that's not what it does.

The Font-style in the @font face rules are similar to Font-weight, and are used to set what font to use for the corresponding font style or weight. 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 Font-style:italic in the CSS code, I call this 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 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.

4. Font-weight

Font-weight and Font-style are similar, but define different words to use different fonts, for noon, this is much better than font-style applicability. Here I have a very representative example, the copyright font "Han flag black" is very rich, but this font is not like "Siyuan blackbody", natural can be based on the value of the Font-weight attribute to load the corresponding font file, how to do? Very simply, use the @font face rule to redefine it, 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.

5. Unicode-range

The role of Unicode-range is to allow specific characters or character fragments to use specific fonts. 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 thought that @font-face in addition to custom some small icon is 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 rules is seriously underestimated, in addition to small icons, @font-face can do a lot of things, and these things, it is more like @font-face should do.

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.

Hope the content of this article can arouse everybody to @font-face real understanding!