Properties

Properties

Editing
  • account_tree
  • bug_report

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'>

DEVDIC-Specified Data Types

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

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <'font-size'>

    DEVDIC-Specified Data Types

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

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

    • <absolute-size> | <relative-size> | <length-percentage>
    Details

    포함된 타입

    • <absolute-size>

      유저 에이전트가 계산하고 보관하는 글꼴 크기를 키워드로 나타내는 타입이다.

      • xx-small | x-small | small | medium | large | x-large | xx-large
      • CSS Fonts Module Level 3
        font-size: small;
        .sub-title { font-size: small;
        }
      Details

      사용되는 키워드

      • large

        medium보다 큰 크기이다.

      • medium

        중간 크기로 지정한다.

      • small

        작게 설정한다.

      • x-large

        large보다 더 큰 크기로 지정한다.

      • x-small

        small보다 더 작게 설정한다.

      • xx-large

        최대 크기로 지정한다.

      • xx-small

        최대로 작게 설정한다.

    • <length-percentage>

      <length><percentage> 타입을 나타낸다.

      • CSS Values and Units Module Level 3
        <length> | <percentage>
      Details

      포함된 타입

      • <length>

        숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

        • CSS Basic User Interface Module Level 4
          <length>
        Details

        사용되는 단위

        아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

        • cm

          1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

        • in

          1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

        • mm

          1cm의 1/10 값을 나타낸다.

        • pc

          1in의 1/16 값을 나타낸다.

        • pt

          1in의 1/72 값을 나타낸다.

        • px

          스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

        • Q

          1cm의 1/40을 나타낸다.

        • deg

          보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

        • grad

          400grad(그라디안)은 완전한 원을 만든다.

        • rad

          2π(라디안)이 완전한 원을 만든다.

        • turn

          1turn(턴)이 완전한 원을 만든다.

        • cap

          대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

        • ch

          글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

        • em

          대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

        • ex

          대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

        • ic

          한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

        • lh

          요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

        • rem

          html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

        • rlh

          html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

        • Hz

          1초당 발생한 진동수를 나타낸다.

        • kHz

          1000Hz를 나타낸다.

        • fr

          그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

        • vb

          html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

        • vh

          뷰포트 높이를 상대적으로 1% 높이를 갖는다.

        • vi

          html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

        • vmax

          vw 또는 vh 중 큰 값을 나타낸다.

        • vmin

          vw 또는 vh 중 작은 값을 나타낸다.

        • vw

          뷰포트 너비를 상대적으로 1% 폭을 갖는다.

        • dpcm

          1cm당 점(dot)의 수를 나타낸다.

        • dpi

          1in당 점(dot)의 수를 나타낸다.

        • dppx

          1픽셀(pixel)당 점(dot)의 수를 나타낸다.

        • ms

          1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

        • s

          초를 나타낸다.

      • <percentage>

        어떠한 기준으로 부터 백분율로 표현한다.

    • <relative-size>

      현재 글꼴 크기를 기준으로 상대적으로 크기를 지정하는 키워드를 나타낸다.

      • larger | smaller
      Details

      사용되는 키워드

      • larger

        현재 크기를 기준으로 상대적으로 한단계씩 더 크게 지정한다.

      • smaller

        현재 크기를 기준으로 상대적으로 한단계씩 더 작게 지정한다.

  • <'font-style'>

    DEVDIC-Specified Data Types

    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)는 지원하지만 다른 웹브라우저는 확인이 필요하다.

    Details

    포함된 타입

    • <angle>

      0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

      <angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.

      선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.

      Details

      사용되는 단위

      아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

      • deg

        보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

      • grad

        400grad(그라디안)은 완전한 원을 만든다.

      • rad

        2π(라디안)이 완전한 원을 만든다.

      • turn

        1turn(턴)이 완전한 원을 만든다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    사용되는 키워드

    • italic

      기울임꼴로 지정된 글꼴을 사용한다. 만약에 사용할 수 없다면 비스듬한 글꼴(oblique)을 사용한다. 둘 다 사용할 수 없다면 인위적으로 시물레이션이 된다.

    • normal

      기울임꼴이나 비스듬한 형태가 아닌 일반 형태를 나타낸다.

    • oblique

      비스듬한 면으로 지정된 글꼴을 선택한다. 면이 비스듬한 글꼴을 사용할 수 없다면 기울임꼴(italic)로 분류된 면이 대신 사용된다. 둘 다 사용할 수 없다면 인위적으로 시물레이션 된다.

      추가적으로 <angle> 값을 사용하여 기울기 각도를 조정할 수 있다.

      현재 파이어폭스 이외의 웹브라우저는 확인이 필요하다.

  • <'font-weight'>

    DEVDIC-Specified Data Types

    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
    Details

    포함된 타입

    • <font-weight-absolute>

      font-weight 속성에 사용되는 글꼴 굵기의 절대값을 나타낸다.

      • CSS Fonts Module Level 4
        [normal | bold | <number [1,1000]>]
      Details

      사용되는 키워드

      • 100

        얇은 두께로 처리한다.

      • 200

        매우 가볍게 처리한다.

      • 300

        가벼운 두께로 지정한다.

      • 400

        일반 굵기로 지정한다.

      • 500

        중간 굵기로 지정한다.

      • 600

        '700'의 반 굵기로 지정한다.

      • 700

        굵게 지정한다.

      • 800

        매우 굵게 지정한다.

      • 900

        매우 무겁게 지정한다.

      • bold

        '700' 값과 동일하다.

      • normal

        '400' 값과 동일하다.

    사용되는 키워드

    • bolder

      상속된 값보다 굵은 가중치를 지정한다.

    • lighter

      상속된 값보다 가벼운 가중치를 지정한다.

  • <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]
    Details

    사용되는 키워드

    • condensed

      CSS Fonts Module Level 3

      normal 보다 압축된 글꼴을 지정한다.

    • expanded

      CSS Fonts Module Level 3

      normal 보다 확장한다.

    • extra-condensed

      CSS Fonts Module Level 3

      normal 보다 더 압축한다.

    • extra-expanded

      CSS Fonts Module Level 3

      normal 보다 더 확장한다.

    • normal

      CSS Fonts Module Level 3

      일반 글꼴을 지정한다.

    • semi-condensed

      CSS Fonts Module Level 3

      condensed 값의 반 정도의 압축을 한다.

    • semi-expanded

      CSS Fonts Module Level 3

      expanded 값보다 반 정도 확장한다.

    • ultra-condensed

      CSS Fonts Module Level 3

      normal 보다 더 초압축된 글꼴을 지정한다.

    • ultra-expanded

      CSS Fonts Module Level 3

      normal 보다 더 최대 확장한다.

  • <font-variant-css2>

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

    • CSS2.0
      normal | small-caps
    Details

    사용되는 키워드

    • normal

      활성화된 값이 없다.

    • small-caps

      작은 대문자 표시를 활성화한다. 글리프(glyphs) 타입의 폰트는  일반적으로 대문자 형태를 사용하지만 소문자 크기로 축소된다.

사용되는 키워드

  • caption

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

  • icon

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

  • menu

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

  • message-box

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

  • small-caption

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

  • status-bar

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

속기에 사용되는 관련 속성

모든 속성을 표시하지 않을 수도 있다.

구문

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

버전 명세

Modules
Module NameStatusSummary
CSS Fonts Module Level 4초안 작업

Last review date: 2022-6-18

지원 웹브라우저