글꼴과 관련된 CSS 속성 중 마지막으로 설명하게 될 속성은 글꼴과 관련된 속성을 한꺼번에 설정할 수 있는 또 하나의 속성인 font입니다.
| 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', 'font-family', caption, icon, menu, message-box, small-caption, status-bar |
- font에 입력되는 속성값은 여러 속성의 속성값을 한꺼번에 입력하는 것이고, 또 속성값이 같은 형태로 존재하는 것도 있기 때문에 일정한 순서가 필요합니다.
1. font style, font variant, font-weight
2. font-size
3. line-height
4. font-family
|
- 첫 번째의 세 속성 순서는 어떤 것이 먼저 와도 상관없습니다. 이들 속성값의 구분은 공백으로 하고 3번째의 line-height를 사용할 경우에는 앞에 "/"가 추가됩니다. 그리고 이 속성 중 font-size, font-family는 생략할 수 없으므로 꼭 입력해야 합니다. 이 규칙을 정리하면 다음과 같습니다.
|
font : [< font-style > || < font-variant > || < font-weight > || < font-size > || /< line-height >] < font-family >
|
- 대괄호([])가 붙은 것은 생략이 가능하고 || 표시는 순서가 상관없다는 뜻입니다. (||는 키보드에서 [shift + \]입니다.)
- 이외에, 아래와 같은 속성값이 있습니다. 참고하세요.
| caption |
captioned controls( buttons, drop-downs, etc.)에서 사용할 폰트
|
| icon |
아이콘에 붙이는 이름에서 사용할 폰트
|
| menu |
메뉴(dropdown menus and menu lists)에서 사용할 폰트
|
| message-box |
대화 상자(dialog boxes)에서 사용할 폰트
|
| small-caption |
small controls에서 사용할 폰트
|
| status-bar |
윈도우 상태 표시줄(window status bars)에 지정할 폰트
|
|
|
< STYLE type="text/css" >
P.ONE {font: italic small-caps bold 15pt /40pt "Arial Black", Arial, modern}
P.TWO {font: italic 15pt "Arial Black"}
P.THREE {font: 15pt /50pt Arial}
< /STYLE >
< p CLASS="ONE">small caps< /p >
< p CLASS="TWO">small caps< /p >
< p CLASS="THREE">small caps< /p > |
|
☞ 제가 각각의 line- height의 효과를 보여드리기 위해서 table에 넣어 보았습니다. |
|
|