본문 바로가기

Webstoryboy

Category

Explanation

CSS

[CSS] font

font

font 속성은 폰트에 관한 설정을 정의합니다.


font

font 속성은 폰트에 관한 설정을 정의합니다.

정의(Definition)

  • font 속성은 폰트에 관한 설정을 정의합니다.
  • font 속성은 폰트 스타일, 폰트 변형, 폰트 두께, 폰트 사이즈, 폰트 간격, 폰트 종류를 설정합니다.

문법(Syntax)

font : font-style / font-variant / font-weight / font-stretch / font-size / line-height / font-family | caption | icon | menu | message-box | small-caption | status-bar

/* size | family를 설정한 경우 */
font: 20px "Open Sans", sans-serif;

/* style | size | family를 설정한 경우 */
font: italic 20px "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family를 설정한 경우 */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family를 설정한 경우 */
font: italic small-caps bolder condensed 16px/3 cursive;

속성(Property)

속성값 설명
font-style 폰트 스타일 속성을 설정합니다.
font-variant 폰트 글꼴을 변형하는 속성입니다.
font-weight 폰트 두께 속성을 설정합니다.
font-stretch 텍스트의 크기를 정의합니다.
font-size 폰트 사이즈를 설정합니다.
line-height 폰트와 폰트사이의 거리를 설정합니다.
font-family 폰트 종류를 설정합니다.
caption 폰트의 스타일을 caption으로 설정합니다.
icon 폰트의 스타일을 icon으로 설정합니다.
menu 폰트의 스타일을 menu로 설정합니다.
message-box 폰트의 스타일을 message-box로 설정합니다.
small-caption 폰트의 스타일을 small-caption로 설정합니다.
status-bar 폰트의 스타일을 status-bar로 설정합니다.

호환성(Compatibility)

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

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기