> 웹 프론트엔드 > CSS 튜토리얼 > 문자 간격이 깨졌고 우리가 할 수있는 일이 없습니다 ... 아마도

문자 간격이 깨졌고 우리가 할 수있는 일이 없습니다 ... 아마도

Christopher Nolan
풀어 주다: 2025-03-08 11:56:22
원래의
982명이 탐색했습니다.

Letter Spacing is Broken and There's Nothing We Can Do About It... Maybe 이 기사는 속성에 관한 CSS 실무 그룹 (CSSWG) 내에서 매혹적인 토론을 탐구합니다. 선임 모질라 개발자는 브라우저 가이 속성을 렌더링하는 방법과 실제 CSS 사양 사이의 오랜 불일치를 강조했습니다. 이 간단한 속성은 놀라운 복잡성을 나타냅니다 핵심 문제는 브라우저가 문자 간 간격을 처리하는 방법에서 비롯됩니다. 인간은 직관적으로 문자 간격을 이해하지만 컴퓨터에는 정의 된 전략이 필요합니다. 각 문자 주위에 공간을 추가해야합니까? LTR (LTR)과 오른쪽에서 왼쪽 (RTL) 언어가 달라야합니까? 선택된 전략은 텍스트 측정 및 라인 브레이크에 큰 영향을 미칩니다.

현재 브라우저 구현은 CSS 사양에서 벗어납니다. 이 사양은 문자 사이에서

> 간격이 발생하도록하지만, 브라우저는 일반적으로 각 문자의 letter-spacing 종료

에 공간을 추가합니다. 이 불일치는 Gecko (Firefox), Blink (Chrome 등) 및 Webkit (Safari)와 같은 다양한 렌더링 엔진에서 존재합니다. CSS 사양은

를 다음과 같이 정의합니다. 그러나 공통 브라우저 구현은 각 문자의 끝에 추가 공간을 추가하여 비대칭 간격을 초래하고 특히 중앙 텍스트 또는 RTL 언어에서 눈에 띄게됩니다. RTL 언어에서 불일치는 텍스트의 시작 부분에 간격을 만듭니다. 왜이 불일치? 확립 된 브라우저 동작을 변경하면 텍스트 측정 및 라인 브레이크가 변경되어 광범위한 웹 사이트 파손이 발생할 수 있습니다. 웹 사이트는 이미 해결 방법을 통해 현재 동작을 보상했을 수 있으며, 변화가 혼란스럽게 만들 수 있습니다. 두 가지 잠재적 솔루션이 고려되고 있습니다

옵션 1 : 공간 분포 재 작업 :

각 문자 전후에 동일한 공간 분포를 의무화하기 위해 사양을 개정 할 수 있습니다. 이것은 대칭 간격을 만들지 만 여전히 레이아웃이 변경 될 위험이 있습니다. . 옵션 2 : 개발자 제어 배치 : 새로운 속성을 소개합니다 (예 : ) 개발자는 간격이 적용되는 위치를 지정할 수 있도록합니다 (, , , 동작을 더 잘 제어 할 수 있도록 개발자에게 제공합니다. 보다 정확하고 일관된 letter-spacing 구현을 향한 여정이 진행 중이며 웹 타이포그래피의 복잡성을 강조합니다.

위 내용은 문자 간격이 깨졌고 우리가 할 수있는 일이 없습니다 ... 아마도의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿