CSS 글꼴 변형 사용 방법 알아보기 속성을 사용하여 텍스트에 소문자를 사용하고 소문자를 사용해야 하는지 여부를 지정합니다.
CSS font-variant 속성은 텍스트를 일반 텍스트 대소문자로 표시할지 아니면 작은 대문자로 표시할지 지정합니다. 속성에는 세 가지 값이 있습니다.
- 일반(기본 텍스트 대소문자)
- 상속
- 소문자
기본 사용법:
.small-caps {
font-variant: small-caps;
}
font-variant 사용을 시작하기 전에 속성은 무엇을, 언제, 어떻게 사용하는지 올바르게 이해하고 있는지 확인합니다. (많은 사람들이 그렇지 않습니다).
일반 텍스트와 작은 대문자의 차이점을 정의하는 것으로 시작하겠습니다.
- Sentence case라고도 하는 일반 텍스트 케이스는 이 문장과 같은 일반 텍스트를 의미하며, 문장의 첫 번째 단어의 첫 글자는 대문자로 표시됩니다.
- 작은 대문자는 짧습니다. 소문자와 혼합되도록 설계된 대문자(비슷한 x 높이 사용).
불행히도 실제가 있는 웹 글꼴은 많지 않습니다. 작은 대문자.
텍스트를 font-variant: small-caps;로 설정하는 경우 다음 중 하나를 얻을 수 있습니다.
- 앞서 본 예와 같이 일반/문장 대소문자 텍스트와 매끄럽게 조화를 이루는 멋진 디자인의 세심하게 디자인된 소문자 👌
- 일반/문장 텍스트와 잘 어울리지 않고 비전문적으로 보이게 만드는 가짜 컴퓨터 생성 소문자 😒
실제 작은 대문자의 예
다음은 실제의 예입니다. 일반/문장 대소문자와 완벽하게 조화를 이루는 작은 대문자 글꼴:
위의 예에서 잘 작동하는 이유는 사용된 글꼴 모음인 Alegreya가 실제 작은 대문자.
가짜 작은 대문자의 예
다음은 가짜 소문자 글꼴의 예입니다.
이 작은 대문자가 일반 텍스트 대소문자와 자연스럽게 섞이지 않는 것을 확인하세요.
위의 예에서도 Alegreya를 사용하고 있지만 가짜 소문자 글꼴로 어떻게 보이는지 확인할 수 있도록 Alegreya SC 글꼴을 비활성화했습니다.
font-variant: small-caps로 텍스트가 어떻게 보이는지 결정하는 요소 선택한 서체(글꼴 모음)가 실제를 제공하는지 여부입니다. 작은 모자들.
불행히도 실제 작은 대문자는 드뭅니다. 따라서 font-variant: small-caps 사용에 대해 생각하기 전에 CSS 스타일시트에서 다음을 수행하십시오.
- 서체에 소문자가 있는지 조사합니다(있는 경우 글꼴 디자이너가 지정합니다. 찾아보세요.)
- 있는 경우 올바르게 활성화되어 있는지 확인하십시오.
그렇지 않으면 이 속성을 사용하는 것을 잊어버리십시오.
다행히도 font-variant 속성은 글꼴의 OpenType 작은 대문자(있는 경우)에 자동으로 액세스합니다. 그러나 여전히 프로젝트로 가져와야 합니다(다른 글꼴을 가져오는 것처럼). 그렇지 않으면 font-variant 속성은 컴퓨터 생성 가비지 작은 대문자를 폴백으로 사용합니다. 이는 사용자가 원하지 않습니다.