CSS initial-letter 속성을 사용하면 작업이 훨씬 더 쉬워집니다.
브라우저 지원
어디에서 initial-letter을(를) 사용해 볼 수 있나요? Safari 및 Chrome 110부터 사용할 수 있습니다. Safari에서는 속성에 -webkit- 접두어가 필요합니다. Firefox에서 구현할 수 있는 해결되지 않은 문제가 있습니다.
다음을 사용하여 initial-letter 지원을 테스트합니다.
@supports (initial-letter: 1 1) { /* Your supported styles */ }
현재 솔루션
현재 CSS에서 드롭 캡 스타일을 어떻게 지정할 수 있을까요?
::first-letter 의사 요소를 사용하면 도움이 됩니다.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
하지만 '부동 소수점 수' 이 첫 글자의 크기를 계산할 수 있습니다.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
lh와 같은 새로운 CSS 단위를 도입하면 이러한 문제를 덜 수 있습니다. 하지만, 이 도구도 지원이 제한되어 있습니다 (lh는 현재 Chrome에서만 지원됨).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
첫 편지 소개
initial-letter 속성을 사용하면 이러한 드롭 캡 스타일 지정을 더 세밀하게 제어할 수 있습니다. 다음과 같이 공백으로 구분된 두 개의 값을 사용합니다.
p::first-letter {
initial-letter: 3.5 3;
}
- 첫 번째 인수는 문자의 크기와 차지할 줄 수를 정의합니다. 글자는 가로세로 비율을 유지하면서 확대됩니다. 음수 값은 사용할 수 없지만 소수점 값은 사용할 수 있습니다.
- 두 번째 인수는 문자 싱크를 정의합니다. 글자가 놓일 위치에 대한 오프셋으로 생각하면 됩니다. 두 번째 값은 선택사항이며 음수가 될 수 없습니다. 이 값이 없는 경우, 문자 크기 값이 가장 가까운 정수로 내림된 것으로 가정합니다. 이는 키워드 'drop'을 사용하는 것과 같습니다. 싱크는 1의 싱크에 해당하는 또 다른 키워드 값인 'raise'도 허용합니다.
값을 변경하면 드롭 캡 스타일에 어떤 영향을 미치는지 확인할 수 있는 이 데모를 확인하세요.
이를 ::first-line와 결합하면 다음과 같은 결과를 얻을 수 있습니다.
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
또는 border를 지정할 수도 있습니다. 다음 예에서 사용하는 'drop' 키워드는 생략할 경우 기본값이며 3과 같습니다.
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
background 또는 box-shadow를 추가할 수 있습니다.
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
또는 텍스트의 배경을 자르세요.
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
가능성은 무궁무진합니다.
이제 initial-letter로 드롭 캡 스타일을 더 세밀하게 제어할 수 있습니다. 서체에 드롭 캡을 추가하시겠어요? 어떻게 스타일을 지정할 수 있을까요? Google에 알려주세요.