CSS - 글꼴 관련 스타일

 

 

 

 

글꼴 관련 스타일

 

• font-family
• font-size
• font-weight
• font-variant
• font-style
• font

 

 

font-family

 

• 선택자 { font-family : 글꼴이름; }
• 텍스트의 글꼴을 지정할 때 사용

 

<h3>font-family 속성 : 텍스트의 글꼴을 지정할 때 사용한다.</h3>
<pre> 선택자 { font-family : 글꼴이름; }의 형식으로 사용한다. </pre>
<p id="ff1">글꼴 변경 테스트1</p>
<p id="ff2">글꼴 변경 테스트2</p>
<p id="ff3">글꼴 변경 테스트3</p>

<h4>웹 폰트 사용하는 방법</h4>
<p>웹 폰트 제공 사이트 예시 : <a href="http://fonts.google.com" target="_blank">구글 웹 폰트 사이트로</a></p>
<p id="web-font">font style test</p>

 

---

 

font-size

 

• 선택자 { font-size : 크기; }
• 텍스트의 크기를 변경할 때 사용
• 상대 크기
        - em : 해당 폰트의 대문자 M의 너비를 기준, 부모 요소의 크기를 기준으로 배수(1.5em = 1.5배)
        - rem : 최상위의 부모 요소의 크기 기준으로 배수
        - % : 기본 글꼴의 크기에 대하여 상대적인 값
• 절대 크기
        - px : Pixels, 표시장치(모니터)에 따라서 상대적인 크기를 가짐
        - pt : Points, 기본으로 지정된 크기를 가짐, 1 포인트는 1/72 인치

 

<ul>
    <li id="size1">고정크기 px 테스트</li>
    <li id="size2">가변크기 em 테스트</li>
    <li id="size3">가변크기 % 테스트</li>
</ul>

<ul id="size4">
    <li id="size5">고정크기 px 테스트</li>
    <li id="size6">가변크기 em 테스트</li>
    <li id="size7">가변크기 % 테스트</li>
</ul>

 

---

 

font-weight

 

• 선택자 { font-weight : normal | bold | bolder | lighter | 수치값(ex : 100); }
• 두꺼운 글씨를 표현할 때 사용한다.

 

<ul>
    <li id="fw1">원래 굵기보다 더 가늘게</li>
    <li id="fw2">굵은 글꼴로 변경</li>
    <li id="fw3">원래 굵기보다 더 굵게</li>
    <li id="fw4">수치로 조절해보기</li>
</ul>

---

 

font-variant

 

• 선택자 { font-variant : 속성값; }
• 작은 대문자로 변경할 때 사용한다.

 

<p>I LOVE YOU</p>
<p id="fv">i love you</p>

---

 

font-style

 

• 선택자 { font-style : normal | italic | oblique; }
• 텍스트의 기울임을 지정할 때 사용한다.

 

<li id="fs1">italic 기울임 글꼴</li>
<li id="fs2">oblique 기울임 글꼴</li>

---

 

font

 

• 선택자 { font : font-style font-variant font-weight font-size/line-height font-family; }
• 글꼴 관련 스타일을 한번에 지정할 때 사용한다.

 

<li id="f1">글꼴 관련 스타일 테스트1</li>
<li id="f2">글꼴 관련 스타일 테스트2</li>