In May, Microsoft officially provided downloads of Ya Black fonts available under Windows XP. Yahei Font is a nearly perfect font that solves the problem that Song font small text cannot be recognized, especially for LCD displays (LCDs). After turning on the ClearType effect, you will get a more perfect visual enjoyment. I am now fascinated by Yahei. Looking back at the system that defaults to Songyi, the jagged teeth are too obvious and very ugly. But the problem that follows is that the black font will have some misalignment effects on the display of web page layout in Internet Explorer. The problems I have found currently mainly exist in two aspects. 1. Underlines sometimes become deleted lines In fact, this is a visual misalignment, not a real strikethrough. In paragraphs with mixed English and Chinese, the underline will be broken and become quite irregular. Below is the Chinese text hyperlink of the homepage of Google.cn: This phenomenon will only occur in Chinese fonts, and English fonts will not be affected: If there is a mixed arrangement in Chinese and English, it will be even more obvious: It can be seen that the underlines in Chinese are moved upwards, and the English language is not affected. 2. Internet Explorer has a change in the height of the line Here is a screenshot of a hyperlink with background image in my blog: The original normal style under Song font is now exposed below, which means that the line height has increased in Internet Explorer. But it didn't change in Firefox. 3. Try to solve it In the screenshot of Google.cn, we found that the "Login" hyperlink on the right is normal, which means that not all Chinese hyperlinks have such problems. I carefully compared the differences in their styles and found the link on the left. There is one more style than "Login" on the right: vertical-align:top; After I blocked this property, everything was fine. Two in this screenshot from the third "Meizu Forum", I found that although it does not appear vertical-align in the text, there are two small pictures in the following: vertical-align:middle; After removing these two pictures, everything went normal again. Therefore, it is certain that using vertical-align in Chinese hyperlinks will cause problems (not every element has a vertical-align attribute). The easiest solution is to avoid using vertical-align or valign, or avoid using super Underline of the link. Of course this is not a good way to deal with the problem correctly As for the problem that is reproduced in my blog, it just shows that the black fonts cause the increase in the row height in Internet Explorer (Firefox displays normal). To solve this problem, you only need to control the height, but it is an in-line element, without It can set the height, so you need to cooperate with disaply:block and then fix the height (however, automatic line wrapping may occur after setting the block attribute, so you need to use float and other attributes in combination). I found that this method can also solve the above problem, so fixing the height for the hyperlink is a better way. Additional Note: I modified the default font based on Windows XP, which may cause some problems. It is difficult for me to determine whether the two types of problems I listed above are caused by the Yahei font itself or other incorrect settings. of. I haven't found whether there is such a problem in Vista system testing yet. If anyone has the conditions, I can help test it. Note: This problem exists in various versions of Internet Explorer and Firefox is not affected.