Different ways to solve English letters and Chinese characters in CSS

Source: Internet
Author: User

Recently in writing a CSS encountered a problem: the English alphabet and Chinese characters are not the same, resulting in full Chinese characters, all English letters and Chinese characters are set in the margin or padding attribute deviation ... Of course, this situation exists in IE browser, Safari, Google Chrome, Firefox, opera do not have a similar problem

The reason for the result:

When the whole Chinese characters:

The general situation in the selected text can be seen on the alignment of the Chinese characters (the specific performance is selected font, from the background appears to be more than a part of the following, in terms of CSS is produced Padding-bottom attribute, in order to illustrate the issue of the existence of the padding attribute bar).

All letters in English:

Similar to the whole Chinese characters in the case of all English is under alignment, there will be similar padding-top properties. Whether it's full Chinese or English at this time the line height is the same.

Alphabetic Chinese character Blending:

But if you mix the Chinese characters with the English alphabet, you can see the difference, then select all the fonts can be seen at this time is the filler is padding=padding-top+padding-bottom, that is, will come out with a padding-top ( Can also be said to be Padding-bottom), the general font in the case of 12px, the more out of the part is about 2px.

Solution:

To change the font:

Originally wanted to use line-height fixed, but line-height is the distance between the baseline and the baseline of each line, and because the Chinese character's baseline and the English alphabet are different, so it does not work, and if it is used as a navigation menu only one line is not useful.

This is only from the font up and down, there is a font can solve this problem, the font is "SimSun", "SimSun" is the legendary "song", in the Windows font folder "song body" file name is "SimSun", his brother "Simhei" It's usually called "black body".

Therefore, the solution is to set the font-family to "SimSun", which may lose some effect, no way if there is a better solution can teach.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.