Font application in web design

Recently, many people have mentioned the issue of how to choose fonts on web pages. Although the problem is small, it is fundamental in front-end development, because current web pages are still dominated by text information, and fonts, as one of the most important parameters of text expression, naturally play a very important role.

Hihi, everyone~ Recently many people have mentioned the issue of how to choose fonts on web pages. Although the problem is small, it is fundamental in front-end development, because current web pages are still dominated by text information, and fonts, as one of the most important parameters of text expression, naturally play a very important role. It is a pity that the importance of fonts has not received enough attention for a long time. Many people's concept of fonts is still stuck at the stage of font-family: "宋体", Arial, Helvetica, serif, but they don't understand why this setting is made, whether this setting is reasonable, etc. Now let me talk about the ins and outs of fonts.

- font-family

Everyone knows that defining fonts in CSS rules is achieved through the font-family rule. I looked through the CSS documentation carefully, but I didn't find any rules that specify a specific font.

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

<font face="Frankin Gothic Book">Lorem Ipsumfont>

Almost no one would consider that Frankin Gothic Book is a Windows only font. You can't see the effect of the Frankin Gothic Book font at all on a Mac. Because the system cannot find this font, it uses the Mac's default font for display. As a result, the style of the web page is completely different from the original, and it cannot achieve the effect of Frankin Gothic Book at all. So W3C proposed the concept of font set - a series of similar fonts are formed into a list in order of priority; the browser starts matching from the head of the list until it finds the first available font, and uses The font is displayed.

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

##<span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsumspan>

## Let’s take a look at how the browser renders this text:

• 
  

Under Windows: the browser starts from The search starts with the first font in the list - Frankin Gothic Book exists in the system and is displayed using the Frankin Gothic Book font.
Under Mac: The browser starts searching 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. The Lucida Grande font exists in the system, the search is terminated, and the Lucida Grande font is displayed.

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

But there may be a computer that does not have either the Frankin Gothic Book font or the Lucida Grande font, so it still cannot display the above text correctly. As a result, developers have to continuously add fonts to this font list to adapt to various systems, causing this font set to lose its original function of "organizing similar fonts". So the "Universal font family" was introduced in the font set, which is the serif and sans-serif we often see. I will introduce these two in detail in future articles, as well as some other general font families. Here, we can simply understand them as a "A final substitute font specified by the browser when all specified fonts are invalid."

For example, let’s improve the above sample text:

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

## Let’s take a look at how the browser renders this improved text:

• 
  

Under Windows: The browser starts searching from the first font in the list - Frankin Gothic Book exists in the system and is displayed using the Frankin Gothic Book font.
Under Mac: The browser starts searching 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. The Lucida Grande font exists in the system, the search is terminated, and the Lucida Grande font is displayed.
Some system: The browser starts searching 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 - the Lucida Grande font does not exist on the system either. Continue searching for the next font - the universal font sans-serif. The browser uses its default sans-serif font "Arial" to display this text.

Please note two points. First of all, which font the universal font family corresponds to is determined by the browser. In the example above the browser specified Arial as its sans-serif font, but it's entirely possible that another browser specified Helvetica as its sans-serif font. Which font will be ultimately used is unpredictable. Secondly, a universal font family is just a drop-in solution when other fonts in the font set are invalid. Therefore -

Designers should try their best to provide a complete font set to cover all systems as much as possible, and should not rely on universal font families.

Two ways of writing similar to the following are

wrong

:

<span style="font-family:sans-serif" >Lorem Ipsumspan>
<span style="font-family:sans-serif,Arial"> Lorem Ipsumspan>

The mistake with the first way of writing is that it is equivalent to not specifying the font at all, and it is still left to the browser to select the font. Writing is equivalent to not writing.

The error in the second way of writing lies in the order. Because a universal font family should only work when all other fonts in a font set are disabled. Therefore, placing the specified font after the universal font will cause the universal font to be used when the specified font does not match it. Therefore, you shouldmake sure that the universal font is the last one in the font set.

In addition, there are two things to explain here.

First of all, although the rules for which fonts in the font set are used by the browser seem simple, they are actually very tricky. I will make specific instructions in future articles.

Secondly, although the CSS rule name of the font is called font-family, its essence is a font set, not a font family in the printing sense. Font family in printing refers to a series of different intensity 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 families are not suitable for use directly as a font set.

The above is the detailed content of Font application in web design. For more information, please follow other related articles on the PHP Chinese website!