본문 바로가기
Reference/CSS

font-variant-numeric 속성은 숫자에 대한 글꼴 글리프를 설정합니다.

by @webstoryboy 2022. 12. 11.

font-variant-numeric 속성은 숫자에 대한 글꼴 글리프를 설정합니다.

Reference/CSS

font-variant-numeric 속성은 숫자에 대한 글꼴 글리프를 설정합니다.

by @webs 2022. 12. 8.

font-variant-numeric

font-variant-numeric 속성은 숫자에 대한 글꼴 글리프(표시 형태)를 설정합니다.


특징 설명
기본값 font-variant-numeric : normal
적용 font
버전 CSS3
사용성 ☆☆☆☆☆

정의(Definition)

  • font-variant-numeric 속성은 숫자에 대한 글꼴 글리프(표시 형태)를 설정합니다.

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-numeric : normal | ordinal | slashed-zero | keywords

/* 기본 속성 */
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; 
font-variant-numeric: oldstyle-nums; 
font-variant-numeric: proportional-nums; 
font-variant-numeric: tabular-nums; 
font-variant-numeric: diagonal-fractions;
font-variant-numeric: stacked-fractions;
font-variant-numeric: oldstyle-nums stacked-fractions;

/* 전역 속성 */
font-variant-numeric: inherit;   /* 상속 */
font-variant-numeric: initial;   /* 초기화 */
font-variant-numeric: revert;    /* 원래대로 돌리기 */
font-variant-numeric: unset;     /* 설정 해제 */

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
font-variant-numeric

폰트와 관련된 속성

  • 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 속성은 텍스트의 선 색상 및 굵기를 설정합니다.

참고(Reference)


댓글