Home  >  Article  >  Web Front-end  >  What should I do if the line heights of Chinese and English letters and Chinese characters in CSS are different?

What should I do if the line heights of Chinese and English letters and Chinese characters in CSS are different?

高洛峰
高洛峰Original
2016-11-24 14:33:161982browse

I recently encountered a problem when writing a CSS: the line heights of English letters and Chinese characters are different, which leads to deviations in the margin or padding properties set when all Chinese characters, all English letters and Chinese characters are mixed... Of course, this is the case It exists in IE browser, Safari, Google Chrome, Firefox, and Opera do not have similar problems.

Cause:

When all Chinese characters are selected:

Generally, when you select text, you can see that the Chinese characters are aligned upward ( The specific manifestation is that the font is selected. From the background, it seems that there is an extra part below. In CSS terms, the padding-bottom attribute is generated. To explain the problem, let’s say that there is a padding attribute.)

When all English letters are used:

Similar to the bottom alignment of all Chinese characters when all English letters are used, an attribute similar to padding-top will appear. Regardless of whether it is all Chinese characters or all English characters, the line height is the same.

Mixing of letters and Chinese characters:

But if you mix Chinese characters and English letters together, you can see the difference. Then select all fonts and you can see that the padding at this time is padding=padding-top+padding. -bottom, that is, there will be an extra padding-top (or padding-bottom). Generally, when the font is 12px, the extra part is about 2px.

Solution:

Change font:

Originally I wanted to use line-height to fix it, but line-height is the distance between the baseline of each line, and because the baseline of Chinese characters and English letters are different, so It doesn't work, and if it is used as a navigation menu with only one line, it is useless.
The only way to start is with fonts. There is really a font that can solve this problem. This font is "simsun". "simsun" is the long-legendary "Songti". The file name of "Songti" is in the windows font folder. It is "simsun", and his brother "simhei" is commonly known as "Heishi".
So, the solution is to set the font-family to "simsun", which may lose some effects. If anyone has a better solution, please give me some advice.


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn