CSS 04. 글꼴관련 스타일

1. font-family : 글꼴을 지정할때 사용

선택자{font-famliy : 글꼴명, 글꼴명, ...} 

<style>
#ff1{ font-family: 궁서; }
</style>
<p id="ff1">font 테스트1</p>

font 테스트1

 

* 외부 웹 폰트 사용하는 방법

웹폰트 제공 사이트 : http://www.fonts.google.com 

<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=Black+Han+Sans&family=Luckiest+Guy&family=Rubik+Gemstones&display=swap" rel="stylesheet">
<style>
 #ff4{font-size: 30px;
      font-family: 'Luckiest Guy','Black Han Sans' ;
     }
</style>
 <p id="ff4">글꼴 테스트 Font Style Test</p>

글꼴 테스트 Font Style Test

 

2. font-size : 글꼴의 크기를 변경할 때 사용

    선택자{font-size : 크기(px| em| %)}
   px : 고정크기 / em,%: 가변 크기 ( 상위글꼴 대비)

<style>
 #fs1{font-size:40px;}
 #fs2{font-size:2em;}
 #fs3{font-size:200%}
</style>        

<ul style="font-size:20px">
        <li id="fs1">고정크기 px테스트</li>
        <li id="fs2">가변크기 em테스트</li> 
        <li id="fs3">가변크기 %테스트</li>
        <!--가변크기는 상위글꼴의 크기대비-->
    </ul>

• 고정크기 px테스트
• 가변크기 em테스트
• 가변크기 %테스트

 

 

3. font-weight : 글꼴의 굵기를 표현할 때 사용

  선택자 { font-weight : normal | bold | bolder | lighter | 100~900}

<style>
#fw1{font-weight: bold;}
#fw2{font-weight: bolder;}/*900*/
#fw3{font-weight: lighter;}/*100*/
</style>
 <ul>
        <li>원래 굵기</li>
        <li id="fw1">굵은 글꼴로 변경</li> <!-- <b>태그나 <Strong>써도 동일-->
        <li id="fw2">원래 굵기보다 더 굵게</li>
        <li id="fw3">원래 굵기보다 더 가늘게</li>
    </ul>

• 원래 굵기
• 굵은 글꼴로 변경
• 원래 굵기보다 더 굵게
• 원래 굵기보다 더 가늘게

 

 

4. font-style : 텍스트를 기울이고자 할 때 사용 

선택자 {font-style : normal| italic| oblique}

<p style="font-style:italic">italic 기울임 끌꼴</p>
<p style="font-style:oblique">oblique 원래 글자를 기울임</p>

italic 기울임 끌꼴

oblique 원래 글자를 기울임