지난 5월, Microsoft는 Windows XP에서 다운로드할 수 있는 Yahei 글꼴을 공식적으로 제공했습니다. Yahei 글꼴은 특히 LCD(액정 디스플레이)의 작은 Song 스타일 문자 해독 문제를 해결하는 거의 완벽한 글꼴입니다. ClearType 효과를 켜면 더욱 완벽한 시각적 즐거움을 얻을 수 있습니다. 나는 이제 야헤이(Yahei)에 매료되었습니다. 송나라의 기본 시스템을 되돌아보면 들쭉날쭉한 가장자리가 너무 눈에 띄고 보기 흉합니다.
그러나 이에 따른 문제는 Yahei 글꼴이 Internet Explorer의 웹 페이지 레이아웃 표시에 약간의 위치 이탈 효과를 갖는다는 것입니다. 지금까지 제가 발견한 문제점은 크게 두 가지 측면에서 존재합니다.
1. 밑줄이 취소선이 되는 경우가 있습니다.
사실 이는 시각적으로 잘못된 정렬이며, 영어와 중국어가 혼합된 문단에서는 밑줄이 깨져 상당히 불규칙해집니다.
다음은 google.cn 홈페이지의 중국어 텍스트 하이퍼링크입니다.
이 현상은 중국어 글꼴에만 나타나며 영어 글꼴에는 영향을 미치지 않습니다.
중국어와 영어가 혼합되어 있으면 더욱 분명해집니다.
한자가 있는 곳마다 밑줄이 위로 이동되어 영어에는 영향을 주지 않은 것을 알 수 있다.
2. Internet Explorer에서 줄 높이가 변경됩니다.
다음은 내 블로그의 배경 이미지가 있는 하이퍼링크의 스크린샷입니다.
이제 노래 글꼴 아래의 원래 일반 스타일이 아래에 노출되는데, 이는 Internet Explorer에서 줄 높이가 증가되었음을 보여줍니다. 하지만 Firefox에서는 아무것도 바뀌지 않습니다.
3. 문제를 해결해 보세요
Google.cn의 스크린샷에서 오른쪽의 "로그인" 하이퍼링크가 정상임을 확인했습니다. 이는 모든 중국어 하이퍼링크에 이 문제가 있는 것은 아니라는 것을 보여줍니다. 각 스타일의 차이점을 주의 깊게 비교했습니다. 왼쪽 링크에 오른쪽 "로그인"보다 추가 스타일이 있는 것을 발견했습니다.
수직 정렬:top;
이 속성을 차단한 후에는 모든 것이 잘 되었습니다. "Meizu Forum"의 세 번째 스크린샷에서 수직 정렬이 텍스트에 나타나지 않지만 다음 두 개의 작은 그림이 있는 것을 발견
했습니다
.
따라서 중국어 하이퍼링크에서 수직 정렬을 사용하는 데 문제가 있을 것이 확실합니다(모든 요소에 수직 정렬 속성이 있는 것은 아닙니다). 가장 간단한 해결책은 수직 정렬이나 valign을 사용하지 않거나 슈퍼 링크에 밑줄을 표시하지 않는 것입니다. 물론 이는 문제를 올바르게 처리하는 좋은 방법이 아니며
, 제 블로그에 재현된 문제는 단지 Yahei 글꼴이 Internet Explorer에서 줄 높이를 증가시키는 원인임을 보여줍니다(Firefox는 정상적으로 표시됩니다). 문제는 높이만 조절하면 되지만 인라인 요소이고 높이를 설정할 수 없기 때문에 disaply:block 에 협조해서 높이를 수정해야 합니다(단, block 속성을 설정한 후 자동 줄 바꿈). 이 경우 float와 다른 속성을 함께 사용해야 합니다.) 이 방법으로 위의 문제도 해결할 수 있다는 것을 알았으므로 하이퍼링크의 높이를 고정하는 것이 더 나은 방법이 될 것입니다.
추가 참고 사항: Windows XP를 기반으로 기본 글꼴을 수정했는데 이로 인해 몇 가지 문제가 발생할 수 있습니다. 위에 나열된 두 가지 유형의 문제가 Yahei 글꼴 자체로 인해 발생하는지 아니면 다른 잘못된 설정으로 인해 발생하는지 판단하기 어렵습니다. . Vista 시스템 테스트에서도 이 문제가 존재하는지 확인할 수 없었습니다. 조건이 있는 사람이 있으면 테스트에 도움을 줄 수 있습니다.
참고: 이 문제는 모든 버전의 Internet Explorer에 존재하며 Firefox는 영향을 받지 않습니다.