Reference/CSS
font-variant-position 속성은 글꼴 변형 형태의 위치를 설정합니다.
font-variant-position
font-variant-position 속성은 글꼴 변형 형태의 위치를 설정합니다. 위 첨자, 아래 첨자로 배치된 글리프의 위치를 설정합니다.
| 특징 | 설명 |
|---|---|
| 기본값 | font-variant-position : normal |
| 적용 | font |
| 버전 | CSS3 |
| 사용성 | ☆☆☆☆☆ |
정의(Definition)
- font-variant-position 속성은 글꼴 글리프(표시 형태)의 위치를 설정합니다.
- font-variant-position 속성은 위 첨자, 아래 첨자로 배치된 글리프의 위치를 설정합니다.
font-variant와 관련된 속성
- font-variant 속성은 글꼴 글리프(표시 형태)를 일괄적으로 설정합니다.
- font-variant-ligatures 속성은 글꼴 글리프(표시 형태)가 겹쳤을 때 설정합니다.
- font-variant-position 속성은 글꼴 글리프(표시 형태)의 위치를 설정합니다.
- font-variant-caps 속성은 소문자/대문자에 대한 글꼴 글리프(표시 형태)를 설정합니다.
- font-variant-numeric 속성은 숫자에 대한 글꼴 글리프(표시 형태)를 설정합니다.
- font-variant-alternates 속성은 글꼴 글리프(표시 형태)의 대체 형태를 설정합니다.
- font-variant-east-asian 속성은 아시아 언어 글꼴 글리프(표시 형태)를 설정합니다.
- font-variant-emoji 속성은 이모지 글꼴 글리프(표시 형태)를 설정합니다.
문법(Syntax)
font-variant-position : normal | sub | super
/* 기본 속성 */
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;
/* 전역 속성 */
font-variant-position: inherit; /* 상속 */
font-variant-position: initial; /* 초기화 */
font-variant-position: revert; /* 원래대로 돌리기 */
font-variant-position: unset; /* 설정 해제 */
속성(Property)
| 속성값 | 값(예) | 설명 |
|---|---|---|
| normal | font-variant-position: normal; | 위첨자, 아래첨자 글리프를 비활성화합니다. |
| sub | font-variant-position: sub; | 아래 첨자 대체 글리프를 설정합니다. |
| super | font-variant-position: super; | 위첨자 대체 글리프를 활성화합니다. |
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| font-variant-position | ❌ | ○ | ○ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ○ |
폰트와 관련된 속성
- font 속성은 폰트에 관한 설정을 일괄적으로 설정합니다.
- font-family 속성은 폰트 종류를 설정합니다.
- font-size 속성은 폰트 사이즈 속성을 설정합니다.
- font-style 속성은 폰트의 스타일을 설정합니다.
- font-weight 속성은 폰트의 두께를 설정합니다.
- font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.
- font-stretch 속성은 폰트의 장평을 설정합니다.
- font-variant 속성은 영문 폰트의 소문자 표시 형태를 설정합니다.
- font-variation-settings 속성은 가변 폰트를 설정합니다.
- font-feature-settings 속성은 오픈 타입 글꼴의 세부사항을 설정합니다.
- font-kerning 속성은 커닝 기능을 사용할 것인지의 여부를 설정합니다.
- font-language-override 속성은 설정된 언어에 적합한 글꼴 글리프를 설정합니다.
- font-optical-sizing 속성은 텍스트 렌더링을 통해 최적화 여부를 설정합니다.
- font-synthesis 속성은 누락된 텍스트의 합성 여부를 설정합니다.
- font-palette 속성은 글꼴에 포함된 팔레트를 설정합니다.
- @font-face 속성은 웹폰트를 설정합니다.
텍스트와 관련된 속성
- text-align 속성은 텍스트 정렬 방식을 설정합니다.
- text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
- text-decoration 속성은 텍스트 라인 속성을 설정합니다.
- text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
- text-justify 속성은 텍스트의 정렬 유형을 설정합니다.
- text-orientation 속성은 텍스트 문자의 방향을 설정합니다.
- text-rendering 속성은 최적화 렌더링을 설정합니다.
- text-overflow 속성은 텍스트 영역 속성을 설정합니다.
- text-shadow 속성은 텍스트 그림자를 설정합니다.
- text-transform 속성은 텍스트 대/소문자를 설정합니다.
- text-emphasis 속성은 텍스트에 강조 표시를 설정합니다.
- text-underline-offset 속성은 언더라인의 오프셋 값을 설정합니다.
- text-underline-position 속성은 언더라인의 위치를 설정합니다.
- text-combine-upright 속성은 문자 조합을 설정합니다.
- text-size-adjust 속성은 스마트폰에서 텍스트 비율을 설정합니다.
- text-fill-color 속성은 텍스트의 면 색상을 설정합니다.
- text-stroke 속성은 텍스트의 선 색상 및 굵기를 설정합니다.
댓글