On font application in Web Design fonts set_ Experience Exchange

Hihi, hello everyone. Recently, a lot of people have talked about how to choose the font on the page. Although the problem is small, but it is the basic development in the front-end, because the current Web page, or text information mainly, and fonts, as a form of text expression of the most important parameters, nature has a very important position. Unfortunately, the importance of the typeface has not received enough attention for a long time. Many people on the concept of the font still stay in the font-family: "XXFarEastFont-Arial, Helvetica, serif stage, but do not understand why this setting, this setting is reasonable and so on." Now let me talk about the ins and outs of fonts.

-Font-family

You know that the CSS rule defines fonts that are implemented by font-family this rule. Carefully flip through the CSS document without discovering any rules that specify a particular font.

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

<font face= "Frankin Gothic book">lorem ipsum</font>

Hardly anyone would consider that the Frankin Gothic book is a font of Windows only. The Frankin Gothic Book font is not visible at all on a Mac, and the system is displayed using the default font of the Mac because it cannot find the font. As a result, the style of the Web page is completely different from the original, can not achieve the effect of Frankin Gothic book. So the concept of font set was put forward by the consortium, which makes a list of approximate fonts in order of precedence; The browser starts from the list header, knowing that the first available font is found and is displayed using that font.

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

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

Let's take a look at how the browser renders this piece of 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-there is no Frankin Gothic book in the system and the search fails. Continue searching for the next font--lucida Grande. A Lucida Grande font is present in the system, the search is terminated, and the Lucida Grande font is displayed.

On the Mac, the Mac can display this text in a Lucida Grande font similar to the Frankin Gothic book.

However, there may be a computer that has neither Frankin Gothic book font nor Lucida Grande font, and it still fails to display the above text correctly. As a result, developers have to add fonts to the list of fonts to accommodate various systems, causing the font set to lose its original "organization approximate font" function. So the font set introduces " Universal font Family ", which is what we often see serif and Sans-serif. I'll introduce these two in more detail in future articles, as well as some of the other generic font families. Here, we can simply interpret them as a " final surrogate font specified by the browser when all specified fonts are invalidated ."

For example, we are improving the above example text:

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

Let's take a 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-there is no Frankin Gothic book in the system and the search fails. Continue searching for the next font--lucida Grande. A Lucida Grande font is present in the system, the search is terminated, and the Lucida Grande font is displayed.
• A system: The browser starts the search from the first font of the list-Frankin Gothic book is not present in the system and the search fails. Continue searching for the next font-Lucida Grande fonts are not present in the system. Continue searching for the next font-generic font sans-serif. The browser applies its default Sans-serif font "Arial" to display this text.

Please pay attention to two points. First of all, the common font family specific which font, is determined by the browser. In the example above, the browser specifies Arial as the Sans-serif font, but it is entirely possible that another browser specifies Helvetica as its sans-serif font. It is impossible to anticipate which font will be used in the end. Second, the universal font family is simply a proxy scheme when other fonts in font set are not valid. So--the designer should give the complete font set as much as possible to cover all the systems as much as possible, rather than relying on the generic font family .

The following two types of writing are wrong :

<span style= "Font-family:sans-serif">lorem ipsum</span>
<span style= "Font-family:sans-serif,arial">lorem ipsum</span >

The mistake in the first way of writing is that it is equivalent to not specifying a font at all, or to the browser to choose the font. Wrote the equivalent of not writing.

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. As a result, placing the specified font after a generic font causes the generic font to be used when the font is not matched. So you should make sure that the generic font is in the last one in font set .

Also, here are two things to say.

First, the rules for which fonts in the font set are applied by the browser, although they look simple, are actually very trickish. I will make a specific explanation in later articles.

Second, although the CSS rule name of the font is called font-family, but its essence is a font set, and not equal to the printing meaning of the font family. The font family in print refers to a series of different intensities 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 suitable for direct use as a font set.

That's it for today, yo. Next time we'll talk about the universal font family.