단일 문자가 다른 브라우저의 줄 높이에 영향을 줍니까?

특정 문자에 의해 행 높이가 영향을 받을 수 있는지

이 기사에서는 특정 텍스트 문자가 렌더링 시 행 높이를 변경할 수 있는지 여부, 즉 행 높이를 조사합니다. Windows 10용 Firefox에서 발견되었습니다.

제공된 코드 조각에는 ASCII 밑줄 문자가 추가된 두 개의 단락이 표시됩니다. 한 경우에는. Firefox에서는 밑줄로 인해 줄 높이가 줄어들고 문자가 잘리는데, 다른 브라우저에서는 이러한 동작이 발생하지 않습니다.

어떤 동작이 올바른지 의문이 생깁니다. line-height: 1은 일반적으로 모든 텍스트를 해당 크기의 줄에 맞추는 기능을 의미합니다. 그러나 캐릭터 디자인에는 특정 문제가 발생할 수 있습니다.

올바른 동작

브라우저 및 운영 체제에 따른 기본 글꼴의 차이로 인해 관찰된 모든 동작은 올바른 것으로 간주됩니다.

줄 높이 및 문자 디자인

줄 높이는 줄 상자 크기에 영향을 주지만 문자 렌더링을 직접 제어하지는 않습니다. 문자는 줄 높이의 영향을 받지 않는 글꼴의 콘텐츠 영역에 의해 정의됩니다.

Line-height: 1은 글꼴이 디자인되지 않았을 수 있으므로 모든 문자가 지정된 높이에 맞을 것이라고 보장하지 않습니다. 문자를 해당 공간에 맞춥니다.

예

다음 코드 조각은 라인박스와 콘텐츠 영역의 구분. 줄 높이가 변경되면 범위 요소(줄 상자를 나타냄)의 빨간색 배경의 크기가 달라지지만 텍스트(콘텐츠 영역을 나타냄)는 변경되지 않습니다.

위 내용은 단일 문자가 다른 브라우저의 줄 높이에 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!