In May, Microsoft officially provided the Yahei font available for download under Windows XP. Yahei font is a nearly perfect font that solves the problem of indecipherability of small Song-style characters, especially for liquid crystal 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 Song Dynasty, the jagged edges are too obvious and ugly.
But the problem that comes with this is that Yahei fonts will have some dislocation effects on the web page layout display in Internet Explorer. The problems I have found so far mainly exist in two aspects.
1. Underlines sometimes become strikethroughs.
In fact, this is a visual misalignment and not a true strikethrough. In paragraphs with mixed English and Chinese, the underlines will be broken and become quite irregular.
The following is the Chinese text hyperlink on the homepage of google.cn:
This phenomenon only appears in Chinese fonts, English fonts are not affected:
It will be even more obvious if there is a mix of Chinese and English:
It can be seen that the underlines have been moved upward wherever there are Chinese characters, and the English language has not been affected.
2. The line height changes in Internet Explorer.
The following is a screenshot of a hyperlink with a background image in my blog:
The original normal style under Song font is now exposed below, which shows that the line height has been increased in Internet Explorer. But in Firefox nothing changes.
3. Try to solve the problem.
In the screenshot of Google.cn, we found that the "Login" hyperlink on the right is normal. This shows that not all Chinese hyperlinks have this problem. I carefully compared the differences in their styles. I found that the link on the left has an extra style than the "Login" on the right:
vertical-align:top;
After I blocked this attribute, everything went fine. In the third screenshot from "Meizu Forum", I found that although vertical-align does not appear in the text, there is in the following two small pictures:
vertical-align:middle;
remove this Two pictures later, everything is normal again.
Therefore, it is certain that there will be problems using vertical-align in Chinese hyperlinks (not every element has the vertical-align attribute). The simplest solution is to avoid using vertical-align or valign, or avoid using super Links are underlined. Of course, this is not a good way to deal with the problem correctly.
As for the problem reproduced in my blog, it just shows that the Yahei font causes the line height to increase in Internet Explorer (Firefox displays normally). To solve this problem, you only need to control the height. , but it is an inline element and the height cannot be set, so you need to cooperate with disaply:block and then fix the height (however, after setting the block attribute, automatic line wrapping may occur. In this case, you need to use float and other attributes together) . I found that this method can also solve the above problem, so fixing the height of the hyperlink would be a better method.
Additional note: I modified the default font on the basis of 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 been able to find out if this problem also exists in the Vista system test. If anyone has the conditions, you can help test it.
Note: This problem exists in all versions of Internet Explorer, Firefox is not affected.