Web Design Skills: High Ranking Problems of Mixed Chinese and English Web Pages
<br />I'm basically going crazy with this problem. The symptoms are as follows  Symptom description: In Internet Explorer (I haven't tried 6, 7, or 8), when Chinese and English are mixed, the default font is used, and the li list is used for float, the above symptom will appear, and the text will not be aligned vertically. It affects the aesthetics of the layout. The reason for the situation in the above picture is that the baselines of Chinese and English texts are different. The lower edge of the Arial font is one pixel lower than that of the Song font (both are size 12), and the upper edge is two pixels lower than that of the Song font. In addition, English also has i, y, which have different upper and lower baselines. Therefore, when Chinese and English are mixed and aligned, there will be an obvious height difference, making the layout uneven. See enlarged image.  Use Song font for both Chinese and English text  This can solve the problem of misaligned text, but Times New Roman is a serif font (Times New Roman is a serif font in English). The font is compact and has many details. It is very eye-catching when arranged together, but when it is written continuously, it is easy to cause recognition difficulties and read the wrong line. For more information on the pros and cons of serif fonts, see this article. In contrast, sans serif fonts are more beautiful and elegant when used to represent English. Solution 1: The discovery of the “dumpling” kid’s shoes. English uses Tahoma font – Comparison of Song, Arial and Tahoma fonts – Arial and Tahoma sans serif fonts are more refined  When using tahoma fonts for mixed Chinese and English text  The line heights of the mixed Chinese and English and pure Chinese combinations are consistent, but the underline of a is attached to the Chinese text when it is in hover state. Defect: When using the Tahoma font, in IE6 and earlier versions, the underline of all Chinese font links will stick to the font. Taobao also uses this solution. I believe that in large projects, when different people work together to complete a page module, it is worthwhile to make the font more standardized and reduce misalignment under unified specifications, and to use the tahoma font with underlines that will appear to be stuck to the font. The following is what I found with my friends : Arial font is used for English and Song font is used for Chinese. You can specify line-height:1.231 in the <a> tag to solve the problem of unequal line heights and the problem of font and underline sticking together. (I don’t know whether it is applicable to a large-scale mixed typesetting of Chinese and English. This needs further verification.)  Summary: Thanks for the rice, thanks for the dumplings, thanks for YUI, and thanks for Taobao! |
<<: MySQL uses frm files and ibd files to restore table data
>>: An article to help you understand the basics of VUE
Recommend
How to load Flash in HTML (2 implementation methods)
First method : CSS code: Copy code The code is as ...
Vue implements the right slide-out layer animation
This article example shares the specific code of ...
MySQL 4 common master-slave replication architectures
Table of contents One master and multiple slaves ...
HTML code to add quantity badge to message button
HTML code: <a onclick="goMessage();"...
Vue implements chat interface
This article example shares the specific code of ...
Mysql transaction concurrency problem solution
I encountered such a problem during development A...
HTML table layout example explanation
The elements in an HTML document are arranged one...
Solution to CSS anchor positioning being blocked by the top fixed navigation bar
Many websites have a navigation bar fixed at the ...
Pessimistic locking and optimistic locking in MySQL
In relational databases, pessimistic locking and ...
Analyze the duration of TIME_WAIT from the Linux source code
Table of contents 1. Introduction 2. First, let&#...
How to connect to MySQL visualization tool Navicat
After installing Navicat The following error may ...
A guide to writing flexible, stable, high-quality HTML and CSS code standards
The Golden Rule Always follow the same set of cod...
Perfect solution to the problem of data being truncated when using the group concat function in Mysql5.7
The day before yesterday, I encountered a problem...
jQuery implements simple pop-up window effect
This article shares the specific code of jQuery t...
Detailed explanation of Vuex environment
Table of contents Build Vuex environment Summariz...