웹스터디

font

토픽 웹스터디 > CSS Dictionary

Summary

엘리먼트안의 텍스트 컨텐츠의 font-style, font-variant, font-weight, font-size, line-height, font-family를 설정하는 약식속성이다.

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
기본값 브라우저에 의존
적용대상 모든요소
상속 상속함
퍼센테이지 지정 불가
미디어 Visual

 

Value

  • font-style, font-variant, font-weight, font-size, line-height, font-family
  • caption : 제목 글꼴 (시스템 글꼴 참조) [아래 sample1참고]
  • icon : 아이콘 라벨에 사용되는 글꼴 (시스템 글꼴 참조)
  • menu : 메뉴에 사용되는 글꼴 (시스템 글꼴 참조)
  • message-box : 대화 상자에 사용되는 글꼴 (시스템 글꼴 참조)
  • small-caption : 작은 라벨에 사용되는 글꼴 (시스템 글꼴 참조)
  • status-bar : 상태바에 사용되는 글꼴 (시스템 글꼴 참조)
  • inherit

Tip

  1. 다음은 같은 폰트 설정을 다른 방식으로 표현한 것이다. [아래 sample2 참고] 아래 두 p엘리먼트의 폰트는 같다
    .p1 {
        font-family: sans-serif;
        font-weight: bold;
        font-size: 1.2em;
        line-height: 2em;
    }
    .p2 {
        font: bold 1.2em/2em sans-serif;
    }

Sample

1. 글꼴 스타일

2. 폰트를 설정하는 약식 속성 - 두 p엘리먼트의 css코드는 다르지만 같은 형태를 출력한다.

 

댓글

댓글 본문
  1. 푸른하늘
    10일차 공부 감사합니다
  2. 이주형
    정말 감사합니다~! 리체님!^_^