Detailed CSS page layout default font style

Core tip: Browser default styles often have different settings in different browsers, different language versions, and even different system versions, which results in a very inconsistent display of pages that use the default style directly in each browser. So there is a similar to the Yui reset and so on to rewrite the browser's default settings to ensure that each browser style consistency practices.

Browser default styles often have different settings in different browsers, different language versions, and even different system versions, which results in a very inconsistent display of pages that use the default style directly in each browser. So there is a similar to the Yui reset and so on to rewrite the browser's default settings to ensure that each browser style consistency practices.

In the case of fonts, the default font type, font size and font height of each browser are different, such as IE8 's Chinese version of the default font when displaying a Web page under Windows XP, and the English version is certainly not. So we need to unify the default font style to achieve consistent display to ensure design consistency and improve development efficiency.

Style priority

Typically, the style of the page that the user sees is subject to layer three control:

The first layer is the default style of the browser
The second layer is the page definition style
The third layer is the user-defined style

Like CSS, the following precedence is higher than the previous one, which means that the page definition style overrides the browser's default style, and the user-defined style has the highest precedence. However, when there is a!important, the page style can override the user custom style. User!important > Web!important > User > Page > Browser default.

Font: Arial

Most of the content characters in our page are Chinese, there is no doubt that the most commonly used and most versatile display of Chinese fonts so far on the web is XXFarEastFont-Arial, but the song body is too bad for displaying English, numerals and English symbols, such as the © character, so we generally expect to use CSS to display them in a better font style. Then use the Arial to display Chinese and Chinese symbols. The reason for choosing Arial is because:

Windows and Macs are pre-installed with this font, which should be the most widely used Web page font. Its potential rivals, Tahoma and Helvetica, are not so fortunate.

Visual design professionals may think it's better to use Tahoma in Windows and use Helvetica on Macs, such as Taobao's default font style is Font:12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", Sans-serif;

This is a good choice, but you will also find that the new version of Google, YAHOO, Youtube, Bing, and even MSN uses Arial as the first default font. So in terms of aesthetics and readability, Arial should be perfectly acceptable.

In general, setting the font-family will eventually set the universal font family to ensure its security, such as Google's set to Font-family:arial,sans-serif, but at least in the non-Chinese version of the Win7 when the code is GBK, IE8 will be due to Sans-serif to render the song, resulting in font deformation, which is why Taobao need to add the song in front of the Sans-serif and Google does not need to do this reason.

Because the choice of Chinese fonts is very limited, so now all the mainstream browsers are set to use the song body to display Chinese. Baidu's home page and search results pages use font-family:arial, which can be described in terms of security. It may be noted that Firefox Chinese version of the default display of the Chinese font is Microsoft, this is because the wisdom of the network without authorization to modify the user-defined style, do not allow the style of Web pages to override the style of browser settings. It is also because of similar circumstances that it is very important for us to design pages flexibly.

One of the problems with using English fonts as the first default font is the alignment problem in Chinese and English as well as the blending of symbols, which can solve most of the situation by setting the line height and haslayout, but it will not be perfect, if the font changed to "song body" can completely solve the problem. Obviously, this problem only appears on IE. So, if your site rarely uses English, numerals, and English symbols, then set the {font-family:\5b8b\4f53} directly. is also a reasonable choice.

Size: 12px

The 12px is the limit of the physical display of the song, although Microsoft Jas can show smaller fonts, but the current application environment is not yet ripe. Because the song body is basically the only common Web font currently displayed in Chinese, 12px becomes the most common font size. We can of course modify this default value according to the needs of the product.

Do not consider a design based on the font size (EM).

In the Chinese version after Chrome3.0, the minimum font size is 12px, for example, you set the minimum font to 10px, and finally the 12px.

Row height: 1.5 times times

This is an empirical value, different products may be different for this value, but we generally set the most commonly used as the default value. For example Yui font is font:13px/1.231 Arial,helvetica,clean,sans-serif, that is, font size default is 13px, row height is 13*1.231=16.003px, The default row height is 1.231 times times the default font. For Chinese, the common size of the font size 12px, 14px, 16px, 18px, and so on, in IE6 and IE7 set its row height also is even can solve some special case of the font to its problems.

In IE6 and IE7, the row height value must be greater than 2px of the font to guarantee the full display of the font or to display the underline effectively when it is linked.

When setting line-height, be careful not to use units (including%), because the child nodes inherit the Line-height value after the operation, so when you use the unit, the browser calculates the line-height as the absolute value of the first definition, not as the font size changes. , and a value of no units is a multiple of the font-size in the container, so setting to no units is the best choice.

Deep CSS Row height is very helpful for understanding line-height and is worth reading.

Performance and efficiency

Most platforms have Arial, which reduces the search time for browsers.

Minimum code, easy to write. Arial is basically the shortest name font, you can save the size of the CSS.
All the letters are lowercase, which is what Google does right now, and the advantage is that you can write faster and increase the efficiency of gzip compression.
Chinese is best to use Unicode, such as the use of the song is {font-family:\5b8b\4f53}, the use of Microsoft Ya Black is {font-family:\5fae\8f6f\96c5\9ed1;}, the advantage is to avoid coding problems, At the same time can get all the mainstream browser support.
Use the correct font type to avoid using quotes, which will reduce the size of the CSS. Chinese fonts can be written in the previous way.

Future

Through the test of the Chinese and English and the symbol mixed row, I found out that Microsoft Jas actually performed pretty well, including English and Chinese characters as well as the display of IE6 and IE7, but the only regret is that under XP if the user who installed the Microsoft Ya-black font does not have the option to "use the edge smoothing of screen fonts", Firefox, Safari and opera, especially IE6, are very blurred and illegible. There is no good solution for this problem, so it is only possible to use it formally when the IE6 usage rate is very small. It may take until 2014, when XP dies.

Although @font-face is very early, the browser's support, speed, and business issues make it rarely used. The good news about fonts recently is that Firefox3.6 will support the Web Open font forma. Information about the future of Web fonts can be seen in the future of Web fonts, about Web fonts: The status quo and future and the future of Web fonts.