CSS에서 한자와 영문, 한자의 줄 높이가 다른 경우 어떻게 해야 하나요?

최근 CSS를 작성할 때 문제가 발생했습니다. 영문자와 한자의 줄 높이가 달라서 모든 한자, 모든 영문자 및 ​​한자를 혼합할 때 설정된 여백이나 패딩 속성에 편차가 발생하는 것입니다. .. 물론 이런 상황은 IE브라우저에 존재하며, 사파리, 구글크롬, 파이어폭스, 오페라에서는 비슷한 문제가 없습니다

원인 :

한자를 모두 사용할 경우 :

일반적으로 텍스트를 선택하면 한자가 위쪽으로 정렬되는 것을 볼 수 있습니다(구체적인 표현은 글꼴을 선택하면 배경에서 아래에 여분의 부분이 있는 것처럼 보입니다. CSS 용어로 패딩은 -bottom 속성이 생성됩니다. 문제를 설명하기 위해 패딩 속성이 있다고 가정해 보겠습니다.

모든 영문자를 사용하는 경우 :

은 모든 영문자의 경우 모든 한자의 하단 정렬과 유사하며, padding-top과 유사한 속성이 나타납니다. 모두 한자든, 전부 영문이든 상관없이 줄 간격은 동일합니다.

글자와 한자 혼합 :

그런데 한자와 영문자를 함께 섞어보면 차이점을 알 수 있는데 이때 글꼴을 모두 선택하면 알 수 있습니다. 이때는 Filler 입니다. padding=padding-top+padding-bottom 인데, 이는 추가 padding-top(혹은 padding-bottom)이 있다는 뜻입니다. 일반적으로 폰트가 12px일 경우, 추가되는 부분은 약 입니다. 2px.

해결책:

글꼴 변경:

원래 line-height를 사용하여 수정하려고 했는데 line-height가 각 줄의 기준선 사이의 거리이고 한자의 기준선과 영문자의 기준선이 다르기 때문에, 게다가 한 줄만 가지고 네비게이션 메뉴로 사용하면 소용이 없습니다.
이 문제를 해결할 수 있는 글꼴이 실제로 있습니다. 바로 "simsun"입니다. "simsun"은 Windows 글꼴 폴더에 있는 "Songti"입니다. 파일명은 '심순'이고, 동생 '심헤이'는 통칭 '헤이헤이'로 알려져 있다.
따라서 해결책은 글꼴 모음을 "simsun"으로 설정하는 것입니다. 이로 인해 일부 효과가 사라질 수 있습니다. 더 나은 해결책이 있는 경우 조언을 부탁드립니다.