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
Manual and scheduled backup steps for MySQL database
Table of contents Manual backup Timer backup Manu...
How to change the encoding of MySQL database to utf8mb4
The utf8mb4 encoding is a superset of the utf8 en...
Linux system disk formatting and manually adding swap partition
Windows: Support NTFS, FAT Linux supports file fo...
Introduction to the steps of deploying redis in docker container
Table of contents 1 redis configuration file 2 Do...
MySQL log system detailed information sharing
Anyone who has worked on a large system knows tha...
A complete guide to the Docker command line (18 things you have to know)
Preface A Docker image consists of a Dockerfile a...
A brief discussion on the binary family of JS
Table of contents Overview Blob Blob in Action Bl...
Markup language - CSS layout
Click here to return to the 123WORDPRESS.COM HTML ...
MySQL full-text search Chinese solution and example code
MySQL full text search Chinese solution Recently,...
Mysql command line mode access operation mysql database operation
Usage Environment In cmd mode, enter mysql --vers...
How to install mysql6 initialization installation password under centos7
1. Stop the database server first service mysqld ...
In-depth explanation of Mysql deadlock viewing and deadlock removal
Preface I encountered a Mysql deadlock problem so...
MySQL learning summary: a preliminary understanding of the architectural design of the InnoDB storage engine
1. Storage Engine In the last section, we mention...
Simple summary of tomcat performance optimization methods
Tomcat itself optimization Tomcat Memory Optimiza...
Detailed explanation of multiple implementation methods of Mysql counting by conditions
Recently, I was adding a series of statistical fu...