예
하나의 선언에있는 모든 글꼴 속성을 지정합니다 :
p.ex1
{
font: 15px arial, sans-serif;
}
p.ex2
{
font: italic bold 12px/30px Georgia, serif;
}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
폰트 약식 속성은 하나의 선언에있는 모든 글꼴 속성을 설정합니다.
설정할 수있는 속성이다 (in order) : "font-style font-variant font-weight font-size/line-height font-family"
글꼴 크기와 글꼴 - 가족 값이 필요합니다. 다른 값 중 하나가없는 경우가있는 경우, 디폴트 값을 삽입한다.
Note: line-height 속성은 라인 사이의 공간을 설정합니다.
| 기본값: | The default value of all the font properties |
|---|---|
| 상속 : | yes |
| 애니메이션 : | yes, see individual properties . Read about animatable Try it |
| 번역: | CSS1 |
| 자바 스크립트 구문 : | object .style.font="italic small-caps bold 12px arial,sans-serif" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| font | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
참고 : 아래의 각 값에 대한 개별 브라우저 지원을 참조하십시오.
CSS 구문
font:font-stylefont-variantfont-weightfont-size/line-height
font-family |caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;속성 값
| 속성 / 값 | 기술 |
|---|---|
| font-style | 글꼴 스타일을 지정합니다. 디폴트 값은 "normal" . 참조 글꼴 스타일 가능한 값을 |
| font-variant | 글꼴의 변형을 지정합니다. 디폴트 값은 "normal" . 참조 글꼴 변형 가능한 값을 |
| font-weight | 글꼴 굵기를 지정합니다. 디폴트 값은 "normal" . 참조 글꼴 무게 가능한 값을 |
| font-size/line-height | 글꼴 크기 및 줄 높이를 지정합니다. 디폴트 값은 "normal" . 참조 글꼴 크기 및 줄 높이 가능한 값을 |
| font-family | 폰트 패밀리를 지정합니다. 기본값은 브라우저에 따라 달라집니다. 참조 글꼴 - 가족 가능한 값을 |
| caption | 자막 컨트롤에서 사용하는 글꼴을 사용합니다 (버튼 등을 드롭 다운 등) |
| icon | 아이콘 라벨에 사용되는 글꼴을 사용합니다 |
| menu | 드롭 다운 메뉴에서 사용하는 글꼴을 사용합니다 |
| message-box | 대화 상자에서 사용하는 글꼴을 사용합니다 |
| small-caption | 캡션 폰트의 작은 버전 |
| status-bar | 상태 표시 줄에서 사용하는 글꼴을 사용합니다 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
예
다른 폰트 속성 값의 일부의 데모.
<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p
style="font:menu">The browser font used in dropdown menus.</p>
<p
style="font:message-box">The browser font used in dialog boxes.</p>
<p
style="font:small-caption">A smaller version of the caption font.</p>
<p
style="font:status-bar">The browser font used in the status bar.</p> »그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 폰트
HTML DOM 참조 : font property