font-family
글꼴을 지정할 때 사용
[표현법]
선택자{ font-family : 글꼴이름; }
<body>
<p id="ff1">글꼴 테스트1</p>
<p id="ff2">글꼴 테스트2</p>
<p id="ff3">글꼴 테스트3</p>
</body>
<style>
#ff1{ font-family: 궁서체; }
#ff2{ font-family: 고딕체; }
#ff3{ font-family: 음슴체; }
</style>
외부폰트 사용
<body>
<a href="http://fonts.google.com" target="_blank"> 구글 웹폰트 사이트</a>
<p id="web-font"> font style test 글꼴테스트 123456</p>
</body>
<style>
#web-font{
font-size:30px;
font-family: 'My Soul', cursive;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=My+Soul&display=swap" rel="stylesheet">
font-size
글꼴의 크기를 변경할 때 사용.
[표현법]
선택자 { font-size : 크기(px,em,%) }
<body>
<ul>
<li id="fs1">고정크기 px 테스트</li>
<li id="fs2">가변크기 em 테스트</li>
<li id="fs3">가변크기 % 테스트</li>
</ul>
</body>
<style>
#fs1{ font-size : 30px; }
#fs2{ font-size : 1.5em; }
#fs3{ font-size : 150% }
</style>
font-weight
글꼴의 굵기를 표현할 때 사용
[표현법]
선택자{ font-weight : normal / bold / bolder / lighter / 100 / 400 / 900 }
<body>
<ul>
<li style="font-weight : normal"> 원래 굵기</li>
<li id="fw1"> 굵은 글꼴로 변경</li>
<li id="fw2"> 원래 굵기보다 더 굵게</li>
<li id="fw3"> 원래 굵기보다 더 가늘게</li>
</ul>
</body>
<style>
#fw1{ font-weight: bold;}
#fw2{ font-weight: 900;}
#fw3{ font-weight: 100;}
</style>
font-variant
텍스트문구를 작은 대문자로 변경할 때 사용
[표현법]
선택자 {font-varient : small-caps;}
<body>
<p>I LOVE YOU</p>
<p style="font-variant: small-caps;">i love you</p>
</body>
font-style
텍스트문구를 기울이고자 할 때 사용
[표현법]
선택자 {font-style : normal / italic / oblique;}
<body>
<ul>
<li style="font-style:italic">italic : 기울임 글꼴</li>
<li style="font-style:oblique">oblique : 원래 글자를 기울인 셈</li>
</ul>
</body>
