Real understanding of the @font face rule in the CSS3 context

A lot of people just mention the @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 creating a small character icon is @font face the whole of the rules, actually just one of the functions, and if you really understand the @font face rules, you'll find that the @font face rules can do a lot of things, especially if we don't consider IE7,IE8 Browsers.

first, @font The essence of face is a variable

Although it is said that the true meaning of the CSS3 new world, var but in fact, in the CSS world, there has been essentially variable things, the @font face rule is one of them, @font face is essentially a definition of font or font set of variables, 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, 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 is not support local local 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:

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

3. Src
   srcRepresents a call to a font file, either 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.

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

5. Font-weight
   font-weightAndfont-stylesimilar, but defines the different words to use different fonts, for noon, this is more thanfont-styleThe applicability is much stronger. I have a very representative example here, the Copyright font "han flag black" is very rich in weight, but this font is not like "siyuan blackbody", Natural can be based onfont-weightProperty value to load the corresponding font file, what to do? Very simple, use@font faceThe rules are redefined, 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.

7. 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 url() external font files. 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 that @font-face in addition to custom some small icon is useless. As a result, when more and more products and projects do not need to be compatible with IE7,IE8 browsers, there seems to be little mention of a better SVG icon solution @font-face .

Through the introduction of this article, we should feel that the @font-face role of the rule is seriously underestimated, in addition to small icons, but @font-face also to do a lot of things, and these things, it is more like the @font-face thing to 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 the preference for special Chinese fonts for local fonts, or for unicode-range specific characters using specific Fonts.

Hope that the content of this article can arouse everyone to the @font-face real understanding! Learn more about Web front-end knowledge to know the Sea Carpenter Library

Real understanding of the @font face rule in the CSS3 context