STYLE

Editing

font

폰트의 종류, 크기, 행간, 스타일, 굵기, 대소문자 처리를 한번에 설정하는 속기 속성이다.

설명

font-style, font-variant, font-weight, font-stretch, font-size,line-height, font-family 속성을 한번에 설정하기 위한 속기 속성이다.

font-variant 속성 값도 포함할 수 있지만 CSS 2.1에서 지원되는 값(<font-variant-css2> 타입)만 가능하다. CSS Fonts Module Level 3 또는 4에 추가된 font-variant 속성 값중 어느 것도 속기 속성에 사용할 수 없다.

<font-variant-css2> = [normal | small-caps]

font-stretch 속성 값도 포함될 수 있지만 CSS Fonts Module Level 3에서 지원되는 값만 포함할 수 있으며 CSS Fonts Module Level 4에 추가된 font-stretch 속성 값은 사용할 수 없다.

<font-stretch-css3> = [normal | ultra-condensed | extra-condensed | condensed |
  semi-condensed | semi-expanded | expanded | extra-expanded |
  ultra-expanded]

사용 가능한 값 타입

〈'font'〉

font 속기 속성에 사용되는 타입이다.

  • CSS Fonts Module Level 4
    [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

사용되는 키워드

  • caption

    캡션이 있는 폼 컨트롤에 사용되는 글꼴을 나타낸다.

  • icon

    아이콘에 레이블을 지정하는 데 사용되는 글꼴이다.

  • menu

    메뉴에 사용되는 글꼴을 나타낸다.

  • message-box

    대화 상자에 사용되는 글꼴을 나타낸다.

  • small-caption

    작은 컨트롤에 레이블을 지정하는 데 사용되는 글꼴을 나타낸다.

  • status-bar

    창 상태 표시줄에 사용되는 글꼴을 나타낸다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈'font-size'〉

    font-size 속성에 사용되는 타입이다.

    CSS에서 글꼴 크기를 지정하는 다양한 값을 나타내는 타입이다.

    • <absolute-size> | <relative-size> | <length-percentage>
  • 〈'font-style'〉

    font-style 속성에 사용되는 타입이다.

    • CSS Fonts Module Level 3
      normal | italic | oblique
    • CSS Fonts Module Level 4
      normal | italic | oblique <angle>?

      CSS Fonts Module Level 4에서는 oblique를 지정시 각도를 직접 지정할 수 있다. -90deg보다 작은 값이나 90deg보다  큰 값은 유효하지 않다. 각도가 지정되지 않으면 14deg로 처리한다.

      현재 파이어폭스(Firefox)는 지원하지만 다른 웹브라우저는 확인이 필요하다.

  • 〈'font-weight'〉

    font-weight 속성에 사용되는 타입이다.

    • CSS Fonts Module Level 4
      <font-weight-absolute> | bolder | lighter
    • CSS Fonts Module Level 3
      normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • 〈font-stretch-css3〉

    텍스트를 넓이거나 좁히는 키워드를 나타낸다. CSS Fonts Module Level 4의 font 속기 속성에만 사용되는 font-stretch 값을 따로 분류하기 위해서 정한 유형이다.

    • CSS3.0, CSS Fonts Module Level 4
      [normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded]
  • 〈font-variant-css2〉

    CSS Fonts Module Level 4의 font 속기 속성에만 사용되는 CSS 2의 font-variant 값을 따로 분류하기 위해서 정한 유형이다.

    • CSS2.0
      normal | small-caps

구문

  • font: italic small-caps bold 30px/1.7 'Mansalva';
    CSS1
    Example

지원 웹브라우저