중국어와 영어 웹 페이지의 순위 혼합 문제 해결_경험 교류

이 문제 때문에 정말 미칠 것 같아요

증상 설명 : IE(6이나 7, 8은 시도 안함)에서 중국어와 영어를 섞어서 기본 폰트를 사용하고, float를 만들기 위해 li 리스트를 사용하는 경우 위와 같은 증상이 나타납니다. , 텍스트가 위아래로 정렬됩니다. 위 그림의 상황이 발생하는 이유는 중국어와 영어의 텍스트 기준선이 다르기 때문입니다. Arial 글꼴의 아래쪽 가장자리는 Song 글꼴(둘 다 크기 12)보다 1픽셀 낮습니다. 그리고 위쪽 가장자리는 노래 글꼴보다 2픽셀 더 짧습니다. 또한 영어에는 i와 y의 위쪽 및 아래쪽 기준선이 다른 경우도 있습니다. 따라서 중국어와 영어를 혼합하여 정렬하면 높이 차이가 뚜렷하게 나타나 레이아웃이 고르지 않게 됩니다. 확대된 이미지를 참조하세요.

한자와 영문 모두 노래폰트를 사용하는 솔루션 채택

는 텍스트 배열이 어긋나는 문제를 해결할 수 있지만 송나라의 영어 단어는 세리프 글꼴입니다(Times New Roman은 영어로 세리프 글꼴입니다). 글꼴이 콤팩트하고 배열할 때 매우 눈길을 끕니다. 연속해서 쓰다 보면 식별이 헷갈려 엉뚱한 줄을 보기 쉽습니다. 세리프 글꼴의 장단점에 대한 자세한 내용은 이 기사를 참조하세요. 그에 비해 영어를 표현할 때에는 산세리프체를 사용하는 것이 더욱 아름답고 우아합니다.

해결책 1: '만두' 아동용 신발의 발견.

영어에서는 타호마 글꼴을 사용합니다 – 노래 글꼴, arial 및 타호마 글꼴 비교 – arial 및 tahoma의 산세리프가 더 세련됩니다

중국어와 영어가 섞여 있을 때 타호마 글꼴을 사용하는 상황

중국어와 영어 혼합, 순수 중국어 조합의 줄 높이는 동일하지만 호버 상태에서는 a에 밑줄이 그어져 중국어와 붙어 있습니다.

결함: IE6 이하 버전에서 타호마 글꼴을 사용할 때 모든 중국어 글꼴 링크의 밑줄이 글꼴에 붙어 있습니다. 타오바오도 이 솔루션을 사용합니다. 대규모 프로젝트에서는 여러 사람들이 함께 작업하여 페이지의 모듈을 완성할 때 글꼴을 더욱 표준화하고 통일된 사양에서 정렬 불량을 줄이는 것이 가치가 있다고 믿습니다. 글꼴을 고수하세요

쌀 어린이 신발에서 발견한 것은 다음과 같습니다:

영어는 Arial체를, 중국어는 Song체를 사용합니다. 태그에 line-height:1.231을 표시하면 줄 높이와 글꼴 및 밑줄 접착 문제를 해결할 수 있습니다. (대규모로 중국어와 영어를 혼합하는 것이 적합한지는 모르겠습니다. 나중에 확인이 필요합니다.)

요약: 밥 고마워요, 만두 고마워요, YUI 고마워요, 타오바오 고마워요!