Usually the style of the page that users see will be controlled by three layers. The first layer is the browser's default style, the second layer is the webpage-defined style, and the third layer is the user-defined style. Like CSS, the later ones have higher priority than the earlier ones, which means that web page-defined styles can override the browser's default styles, and user-defined styles have the highest priority. The actual situation is that although browsers more or less provide the function of user-defined styles, very few users will customize it, and generally they are advanced users. The default styles of browsers often have different settings in different browsers, different language versions and even different system versions. This results in pages that directly use the default style being displayed very inconsistently in various browsers, so there is a problem. A method similar to YUI's reset is used to try to rewrite the browser's default settings to ensure consistency in the styles of each browser.
Take fonts as an example. The default font type, font size and font line height of each browser are different. For example, when the Chinese version of IE8 displays web pages under Windows XP, the default font is Song Dynasty, but this is certainly not the case for the English version. Therefore, we need to uniformly set the default font style to achieve consistent display effects to ensure design consistency and improve development efficiency.
In the future, prepare to use the following default font style:
body{ font: 12px/1.5 arial; }Most of the content characters on our pages are in Chinese. There is no doubt that the most commonly used and most common font for displaying Chinese on web pages is Song Dynasty, but Song Dynasty is too bad at displaying English, numbers and English symbols , such as the © character. , so we generally expect to display them with better font styles through CSS, and then use Song Dynasty to display Chinese and Chinese symbols. The reason why I chose arial is because:
tahoma and helvetica are not so lucky.font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;
This is a very good choice, but you will also find that new versions of Google, YAHOO, Youtube, Bing and even MSN use arial as the first default font. So arial should be completely acceptable in terms of beauty and readability.font-family:arial,sans-serif; but at least in the non-Chinese version of Win7 when the encoding is GBK , IE8 will render Song font due to sans-serif , causing the font to be deformed. This is why Taobao needs to add Song font before sans-serif but Google does not need to do this.font-family:arial; which can illustrate the security of doing so. Some people may have noticed that the default Chinese font displayed in Firefox China is Microsoft Yahei. This is because Mouzhi Network has modified the user-defined style without authorization and does not allow the style of the web page to override the style set by the browser. It is also because of similar situations that it is very important for us to flexibly design web pages. One of the problems caused by using English fonts as the first default font is the alignment problem when Chinese, English and symbols are mixed . Most situations can be solved by setting the line height and hasLayout, but it will not be perfect. If you change the font Changing it into "Song Ti" can completely solve the problem. Apparently this problem only occurs on IE. Therefore, if your website rarely uses English, numbers and English symbols, then directly setting {font-family:5b8b4f53;} is also a reasonable choice.
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 are 12px, 14px, 16px, 18px and other even sizes. Setting the line height to an even number in IE6 and IE7 can solve the font alignment problem in some special cases.line-height , be careful not to use units (including %) , because the child nodes will inherit the calculated line-height value, so when using units, the browser will calculate line-height as the first defined value. The absolute value does not change as the font size changes, and the unitless value is a multiple of font-size of the container, so setting it to a unitless value is the best choice.line-height and is worth reading.arial to reduce browser search time.arial is basically the font with the shortest name, which can save CSS size.{font-family:5b8b4f53;} , and when using Microsoft Yahei, it is {font-family:5fae8f6f96c59ed1;} . This has the advantage of avoiding encoding. problem, and can be supported by all major browsers at the same time.