[Tutorial] About Font application in web design (1) Font Set

Hihi, everybody ~

Recently, many people have mentioned how to select fonts on webpages. Although the problem is small, it is basic in front-end development, because the current webpage is still dominated by text information, and the font, as one of the most important parameters of text representation, naturally, it has a very important position. Unfortunately, the importance of fonts has not been paid enough attention for a long time. Many people still stick to the font-family: "", Arial, Helvetica, and serif phases, but do not understand why the settings are reasonable. Now let me talk about the ins and outs of fonts.

-Font-family

We all know that the font defined in CSS rules isFont-familyThis rule is implemented. After carefully reviewing the CSS documents, we did not find any rules that can specify a specific font.

Think about the code that you saw around the world 10 years ago:

 

<Font face = "Frankin Gothic Book"> Lorem Ipsum </font>

 

Almost no one will consider that Frankin Gothic Book is a Windows only font. The font of Frankin Gothic Book is invisible on a Mac. The default font of Mac is used because the font cannot be found. As a result, the style of the webpage is completely different from that of the original one, and it cannot achieve the effect of Frankin Gothic Book. So W3C proposedFont setConcept-a list of similar fonts in the order of priority. The browser matches the first available font from the header of the list and displays the first available font.

For example, in the above example, we can create such a font set:

 

<Span style = 'font-family: "Franklin Gothic Book", "Lucida Grande" '> Lorem Ipsum </span>

 

Let's see how the browser displays this text:

• In Windows: the browser starts searching from the first font in the list. The system contains the Frankin Gothic Book, which is displayed in the Frankin Gothic Book font.
• Mac: the browser starts searching from the first font in the list-the Frankin Gothic Book does not exist in the system, and the search fails. Continue to search for the next font, Lucida Grande. The Lucida Grande font exists in the system. The search is terminated and displayed in the Lucida Grande font.

In this way, Mac can display the text in a Lucida Grande font similar to Frankin Gothic Book.

 

However, there may be a computer with no Frankin Gothic Book or Lucida Grande font on it, so it still cannot display the text above correctly. As a result, developers had to constantly Add fonts in the font list to adapt to various systems, resulting in the loss of the original "organization approximate font" function. Therefore,"General font family", Which we often seeSerifAndSans-serif. I will introduce these two in detail in future articles, as well as some other general font families. Here, we can simply think of them asWhen all specified fonts are invalid, the browser specifies a final alternative font.".

For example, we are improving the example text above:

 

<Span style = 'font-family: "Franklin Gothic Book", "Lucida Grande", sans-serif'> Lorem Ipsum </span>

 

Let's see how the browser displays the improved text:

• In Windows: the browser starts searching from the first font in the list. The system contains the Frankin Gothic Book, which is displayed in the Frankin Gothic Book font.
• Mac: the browser starts searching from the first font in the list-the Frankin Gothic Book does not exist in the system, and the search fails. Continue to search for the next font, Lucida Grande. The Lucida Grande font exists in the system. The search is terminated and displayed in the Lucida Grande font.
• A system: the browser starts searching from the first font in the list. The system does not contain the Frankin Gothic Book, and the search fails. Continue to search for the next font-The Lucida Grande Font does not exist in the system. Continue to search for the next font-General font sans-serif. The browser uses its default sans-serif font "Arial" to display this text.

 

Pay attention to two points. First, the font corresponding to the generic font family is determined by the browser. In the preceding example, the browser specifies Arial as the sans-serif font, but it is entirely possible that another browser specifies Helvetica as its sans-serif font. The specific font cannot be used as expected. Secondly, the general font family is only a substitute scheme in which other fonts in the font set are ineffective. So --Designers should give as many font sets as possible to cover all systems as much as possible, instead of relying on the generic font family..

 

Either of the following statements is similarIncorrect:

 

<Span style = "font-family: sans-serif"> Lorem Ipsum </span>
<Span style = "font-family: sans-serif, Arial"> Lorem Ipsum </span>

 

The first mistake in writing is that it is equivalent to having no font specified at all and is still handed over to the browser to select the font. Writing is equivalent to not writing.

The second mistake lies in order. Because the generic font family should work only when all other fonts in a font set expire. Therefore, placing the specified font after the General font will cause the General font to be used if the specified font has not been matched. So you shouldMake sure that the general font is placed at the end of the font set..

 

In addition, two things are described here.

First, although the browser uses the font set font rules, they seem very simple, but they are actually very trickish. I will explain it in a later article.

Secondly, although the font CSS rule name is font-family, it is essentially a font set, not a printed font family. Printed font family refers to a series of different combinations of the same words, such as Lucida Family (including Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande, etc.) and Arial Family (Arial, arial Black, Arial Rounded MT, etc.), but obviously these font families are not suitable for use directly as a font set.

 

Today, we are here. Next, let's take a closer look at the general font family.