자간
프리셋 letter-spacing 척도입니다.
이 페이지의 내용
클래스
| 클래스 | 선언 |
|---|---|
tracking-<name> | letter-spacing: var(--tracking-<name>); |
좁은 자간 키에는 이미 음수 길이가 포함되어 있으므로 tracking-tight를 그대로 사용하세요. -tracking-tight처럼 부호를 붙인 토큰 형식은 지원하지 않습니다.
값
0이 아닌 프리셋 값은 letter-spacing을 선언한 요소의 글꼴 크기를 기준으로 하는 em을 사용합니다. tracking-normal은 0을 지정합니다. 네이티브 키워드가 필요하면 (letter-spacing:normal)을 사용하세요.
| 클래스 | 값 |
|---|---|
tracking-tightest | -.072em |
tracking-tighter | -.04em |
tracking-tight | -.02em |
tracking-normal | 0 |
tracking-wide | .02em |
tracking-wider | .04em |
tracking-widest | .12em |
모든 자간 값 비교
tracking-tightesttracking-tightertracking-tighttracking-normaltracking-widetracking-widertracking-widest상속한 자간은 계산된 길이를 유지합니다
tracking-widest는 .12em을 지정하며 글꼴 크기가 16px이면 1.92px로 계산됩니다. 32px 글꼴을 사용하는 자식은 이 길이를 상속하며 자간이 자동으로 두 배가 되지는 않습니다.
em 자간을 다시 적용하면 길이를 다시 계산합니다
두 자식은 같은 글꼴과 크기를 사용합니다. 상속한 letter-spacing 길이는 1.92px로 유지되며, 클래스를 다시 적용하면 자식의 32px 글꼴 크기를 기준으로 .12em을 계산합니다.
텍스트 설명
- 부모는 font-md와 tracking-widest를 사용합니다. 루트 글꼴 크기가 16px이면 .12em 자간은 1.92px 길이로 계산됩니다.
- 두 자식 견본은 font-3xl, 즉 32px를 사용하며 단어와 글꼴도 같습니다.
- 첫 번째 자식은 계산된 1.92px 자간을 상속합니다. 두 번째는 tracking-widest를 다시 적용하므로 .12em을 32px 기준으로 계산해 3.84px가 됩니다.
- 글리프 크기는 같아도 두 번째 텍스트 상자는 더 넓습니다. 색이 있는 안내선은 레이아웃 너비를 보여 주며 글리프의 실제 그리기 경계나 tracking이 출력한 테두리가 아닙니다.
자식에 tracking-widest를 적용하면 자신의 32px 글꼴 크기를 기준으로 .12em을 계산해 3.84px가 됩니다. 이는 줄 높이에서 사용하는 단위 없는 비율과 다릅니다.
자간은 텍스트 사이의 간격을 조정하며 글리프 모양을 늘리지 않습니다. 줄바꿈이 달라질 수 있으므로 컨테이너가 커질 수 있게 하고 실제 글꼴과 언어로 확인하세요.
text-* 텍스트 스타일에는 letter-spacing 선언이 포함됩니다. 같은 요소와 같은 조건에서는 tracking-* 유틸리티가 이 조합 스타일 뒤에 와 자간을 덮어쓸 수 있습니다. 길이 리터럴이 필요하면 (letter-spacing:-.03em) 같은 네이티브 선언을 사용하세요.
관련 문서: 줄 높이, 텍스트 스타일의 보조 토큰, 네이티브 자간 동작.
사용 예
같은 문구와 글꼴 크기에서 자간 값 두 개를 비교합니다.
Letter spacing shapes this line.
Letter spacing shapes this line.
<div> <p class="… font-lg tracking-tight">Letter spacing shapes this line.</p> <p class="… font-lg tracking-widest">Letter spacing shapes this line.</p></div>생성된 CSS
@layer theme { :root, :host { --tracking-tight: -.02em; --tracking-widest: .12em; --font-size-lg: 1.125rem }}@layer utilities { .font-lg { font-size: var(--font-size-lg) } .tracking-tight { letter-spacing: var(--tracking-tight) } .tracking-widest { letter-spacing: var(--tracking-widest) }}사용자 정의
프리셋 값을 변경하거나 토큰을 추가하세요. --tracking-display를 정의하면 tracking-display가 생성됩니다.
@theme { --tracking-tight: -.03em; --tracking-display: -.05em;}생성된 CSS
@layer theme { :root, :host { --tracking-display: -.05em }}@layer utilities { .tracking-display { letter-spacing: var(--tracking-display) }}