1. 글꼴을 설정하는 font-family ¶
다중 글꼴을 선택할 수 있다.
{font-family:글꼴}
둘 다 있을 경우에는 먼저 지정한 글꼴이 우선 순위를 가진다.
{font-family:글꼴}
~cpp
<html>
<head>
<title>글꼴 설정 예제</title>
</head>
<Style type="text/css">
font.01{font-family: "Arial Black", "Script"}
font.02{font-family: "한컴바탕", "상호체"}
</Style>
<body>
<b>
<font class="01">Css & Java Script</font><br><br>
<font class="02">한컴 바탕폰트체로 나타냅니다.</font><br><br>
</b>
</body>
</html>
font.01{font-family: "Arial Black", "Script"} 둘 중 하나만 클라이언트의 컴퓨터에 있으면 그 것이 글꼴이 된다.둘 다 있을 경우에는 먼저 지정한 글꼴이 우선 순위를 가진다.
2. 글자 크기를 설정하는 font-size ¶
스타일 시트에서는 원하는 글자 크기를 마음대로 조정할 수 있다.
{font-size:절대크기|상대크기}
html과 달리 크기 조절에 제한이 없다.
{font-size:절대크기|상대크기}
~cpp
<html>
<head>
<title>문자 크기 설정 예제</title>
</head>
<Style type="text/css">
body{font-size:10pt}
font.01{font-size:50pt}
font.02{font-size:6mm}
</Style>
<body>
<body><body>태그안에 있는 모든 문자들은 10pt로 설정되어 있습니다.<br>
<font class="01">CSS란 무엇인가?</font><br><br>
<font class="02">우리 말로 스타일 시트입니다.</font><br><br>
IE메뉴 문자 크기를 변형 해보십시오<br>
변화가 생기질 않을 것입니다.
</body>
</html>
글꼴 크기에 사용되는 단위는 아주 다양하게 있다. 단위를 사용하지 않으면 기본적으로 픽셀 단위를 사용한다. html과 달리 크기 조절에 제한이 없다.
3. 글자 기울임을 설정하는 font-style ¶
{font-style:스타일}
~cpp
<html>
<head>
<title>글꼴 스타일 설정 예제</title>
</head>
<Style type="text/css">
font.01{font-style:italic}
font.02{font-style:oblique}
</Style>
<body>
<b>
<font size="3" class="01">italic으로 바뀝니다.</font><br><br>
<font size="3" class="02">oblique로 바뀝니다.</font><br><br>
</b>
</body>
</html>
normal(보통), italic(이탤릭), oblique(기울임)5. 글자 두께를 설정하는 font-weight ¶
{font-weight:키워드}문자 두께를 키워드에서 설정한 값으로 적용
- 키워드: normal, bold, bolder, lighter(100 ~ 900)
