Font application in Web design

Recently, a lot of people have mentioned the question of how to choose Font on the webpage. Although the problem is small, but is the front-end development of the basic, because the current Web page, or text information-based, and font, as a form of text expression of one of the most important parameters, nature has a very important position.

Hihi, hello everyone ~ Recently, a lot of people have mentioned how to choose the font on the Web page problem. Although the problem is small, but is the front-end development of the basic, because the current Web page, or text information-based, and font, as a form of text expression of one of the most important parameters, nature has a very important position. Unfortunately, the importance of fonts has not been paid enough attention for a long time. Many people on the concept of the font or stay in the font-family: "Song Body", Arial, Helvetica, serif stage, but do not understand why such settings, such settings are reasonable and so on. Now let me talk about the ins and outs of fonts.

-Font-family

It is known that the font defined in CSS rules is implemented by font-family this rule. Carefully flipping through the CSS document without discovering any rules that would specify a particular font.

Think about ten years ago, you could see code like this everywhere:

< Font Face = "Frankin Gothic book" > Lorem Ipsum </ Font >

Almost no one will consider that Frankin Gothic book is a Windows only font. The effect of the Frankin Gothic book font is not visible on a Mac, because the font is not found, and the default font for the Mac is displayed instead. Thus, the style of the Web page is completely different from the original, and can not reach the Frankin Gothic book effect. So the concept of the font set is proposed-a series of approximate fonts in order to form a list of priorities, the browser starts from the list header match, know to find the first available font, and use the font to display.

For example above, we can create a font set like this:

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

• Let's see how the browser renders this text:

• 
  

• Under Windows: The browser starts the search from the first font in the list-the Frankin Gothic book exists in the system and is displayed using the Frankin Gothic book font.

• MAC: The browser starts the search from the first font in the list-Frankin Gothic book does not exist in the system and the search fails. Continue searching for the next font--lucida Grande. There are Lucida Grande fonts in the system, terminating the search and displaying them in Lucida Grande font.

So on Mac, Mac can display this text in Lucida Grande font similar to Frankin Gothic book.

But there may be a computer with neither Frankin Gothic book font nor Lucida Grande font, and it still doesn't display the text correctly. The developer had to constantly add fonts to the font list to accommodate a variety of systems, causing the font set to lose its original "organization-approximate font" effect. So the font set introduces the " Universal font Family ", which is the serif and Sans-serifthat we often see. I'll cover these two in more detail in future articles, as well as some other generic font families. Here, we can simply interpret them as a " final surrogate font specified by the browser in the event that all the specified fonts are invalidated ."

For example, we are improving the sample text above:

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

• Let's look at how the browser renders this improved text:

• 
  

• Under Windows: The browser starts the search from the first font in the list-the Frankin Gothic book exists in the system and is displayed using the Frankin Gothic book font.

• MAC: The browser starts the search from the first font in the list-Frankin Gothic book does not exist in the system and the search fails. Continue searching for the next font--lucida Grande. There are Lucida Grande fonts in the system, terminating the search and displaying them in Lucida Grande font.

• A system: The browser starts the search from the first font in the list-there is no Frankin Gothic book in the system and the search fails. Continue searching for the next font-there is no Lucida Grande font in the system. Continue searching for the next font-universal font sans-serif. The browser applies its default Sans-serif font "Arial" to display this text.

Please note that two points. First, the universal font family specifically corresponds to which font is determined by the browser. In the example above, the browser specifies that Arial is a sans-serif font, but it is entirely possible that another browser specifies Helvetica as its sans-serif font. It is not possible to specify which font is finally applied. Second, the universal font family is simply a surrogate scheme when other fonts in the font set are not valid. Therefore-the designer should give as much as possible to the full set of fonts to cover as many systems as possible, rather than relying on the universal font family .

Two ways of writing that are similar to the following are false :

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

The error in the first notation is that it is equivalent to not specifying a font at all and still being left to the browser to select the font. Wrote the equivalent of not written.

The second type of error is in order. Because the universal font family should work when all other fonts in a font set are invalidated. Therefore, placing the specified font in a generic font will cause the font to be used when it is not matched. Therefore, you should make sure that the universal font is the last one in the font set .

In addition, here are two things to explain.

First, the rules for which fonts in the font set are applied by the browser, though seemingly simple, are very trickish. I'll make a specific statement in a later article.

Second, although the CSS rule name of the font is called font-family, its essence is a font set, and not equal to the font family in the print sense. The printed font family refers to a series of different strength combinations of the same typeface, 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 Family are not intended to be used directly as a font set.