Usually, the style of the page seen by users will be controlled by three layers. The first layer is the default style of the browser, the second layer is the web page definition style, and the third layer is the user-defined style. Like CSS, the priority behind is higher than the previous one, which means that the web page definition style can override the browser's default style, while the user-defined style has the highest priority. The actual situation is that although browsers provide more or less user-defined style functions, very few users will customize them, and they are generally used as advanced users. The default style of the browser is often different in different browsers, different language versions and even different system versions. This leads to the inconsistent display of pages using the default style under each browser, so there is This is a practice such as reset like YUI to try to rewrite the default settings of the browser to ensure the consistency of the style of each browser.
Take fonts as an example. The default font types, font sizes and font line heights of each browser are different. For example, the default font of IE8 when displaying web pages under Windows XP is Song font, but the English version will definitely not be like this. Therefore, we need to set the default font style uniformly in order to achieve consistent display effects to ensure consistent design and improve development efficiency.
In the future, prepare to use the following default font styles:
body{
font: 12px/1.5 arial;
}Most of the characters in our page are in Chinese. There is no doubt that the most commonly used and common fonts on web pages that display Chinese are Song fonts, but Song fonts are too bad when displaying English, numbers and English symbols, such as © Characters, so we generally expect to use CSS to display them in better font styles, and then use Song font to display Chinese and Chinese symbols. The reason I chose arial is because:
Both Windows and Mac have this font pre-installed, which should be the most widely used web font. Its potential rivals tahoma and helvetica are not so lucky.
Visual design professionals may think that using tahoma in Windows and helvetica in Mac is better. For example, Taobao's default font style is font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif; This is a great choice, but you will also find that new versions of Google, YAHOO, Youtube, Bing and even MSN use arial as the first default font. Therefore, in terms of aesthetics and readability, arial should be completely acceptable.
Generally speaking, setting font-family will set a common font family at the end to ensure its security. For example, Google's setting is font-family:arial,sans-serif; but at least in non-Chinese version of Win7 when the encoding is GBK , IE8 will render Song fonts due to sans-serif , causing deformation of the fonts. This is why Taobao needs to add Song fonts before sans-serif and Google does not need to do this.
Because the choice of Chinese fonts is very limited, all mainstream browsers currently set to use Song font to display Chinese. Baidu's homepage and search results page use font-family:arial; the security of doing this can be explained from the side. Some people may notice that the Chinese font displayed by Firefox Chinese version is Microsoft Yahei. This is because Mouzhi Network has modified the user-defined style without authorization and does not allow the web page style to overwrite the style set by the browser. It is also due to similar situations that it is very important for us to design web pages flexibly.
One of the problems that will lead to using English fonts as the first default font is the alignment problem in Chinese and English and symbol mixing. Most of the situations can be solved by setting the line height and hasLayout, but they will not be perfect. If you change the font It can completely solve the problem. Obviously, this problem only occurs in IE. Therefore, if your website rarely uses English, numbers and English symbols, it is also a very reasonable choice to set {font-family:5b8b4f53;} directly.
12px is the limit of Songtung’s display. Although Microsoft Yahei can display smaller fonts, the current application environment is not yet mature. Since Song font is basically the only universal web font to display Chinese currently, 12px has become the most commonly used font size. Of course, we can modify this default value according to the needs of the product.
No need to consider designs based on font size (em).
In the Chinese version after Chrome 3.0, the minimum font size is 12px. For example, if you set the minimum font to 10px, it will eventually become 12px.
This is an experience value. Different products may have different requirements for this value, but we generally set the most commonly used default value. For example, in YUI's font, it is font:13px/1.231 arial,helvetica,clean,sans-serif; that is, the default font size is 13px, the line height is 13*1.231=16.003px, and the default line height is 1.231 times the default font. For Chinese, the commonly used font sizes such as 12px, 14px, 16px, 18px, etc., setting the line height to an even number in IE6 and IE7 can also solve the problem of fonts in some special cases.
In IE6 and IE7, the line high value must be greater than 2px of the font to ensure the complete display of the font or to effectively display the underscore when it is a link.
When setting line-height , be careful not to use units (including %), because child nodes will inherit the calculated line-height value. Therefore, when using units, the browser will calculate line-height as the first definition. Absolute value, without changing with the font size, and the unitless value is a multiple of font-size of the container, so setting it to a unitless value is the best choice.
In-depth CSS line height is very helpful for understanding line-height and is worth reading.
Most platforms have arial , which reduces the search time of browsers.
Minimal code and easy to write. arial is basically the font with the shortest name, which can save the size of CSS.
All letters are lowercase, and Google currently does this, with the advantage that they can be written faster and improve the efficiency of Gzip compression.
It is best to use unicode to express it in Chinese. For example, using Songyi is {font-family:5b8b4f53;} , and using Microsoft Yahei is {font-family:5fae8f6f96c59ed1;} . This benefit is to avoid encoding. Problem, and can also be supported by all mainstream browsers.
Use the correct font type to write, avoid quotation marks, which can reduce the size of the CSS. Chinese fonts can be written in the previous way.
Through the test of mixed arrangement of Chinese and English and symbols, I found that Microsoft Yahei actually performed quite well, including English numbers and English characters, as well as the display effects of IE6 and IE7, but the only regret is that if Microsoft Yahe is installed under XP If users with black fonts do not turn on the "Smoothing edges of screen fonts" option, it will be very blurry and difficult to recognize under Firefox, Safari, Opera, and especially IE6. There is currently no good solution to this problem, so it is only possible to use it formally until the IE6 usage ratio is very small. Maybe it will take until 2014, when XP dies.
Although @font-face was found very early, the browser's support, network speed and business problems have rarely been used. The good news about fonts recently is that Firefox 3.6 will support Web Open Font Forma. For relevant information about the future of web fonts, you can see the future of web fonts, about web fonts: the current situation and the future, and talk about the current situation and the future of web fonts.