3일차 - 폰트 패밀리

눈누 사이트 https://noonnu.cc/ 에서 Gmarket Sans 다운로드

CSS에 @font-family{ } 적용

<style>
    @font-face {
        font-family: 'GMS_Light';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'GMS_Medium';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'GMS_Bold';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
</style>

HTML

<p>폰트적용 해야지</p>
<p class="fontPoint">나한테만 다른 폰트 적용해줘!</p>
<p>일반적인 스타일은 태그를 타고 정의를 내려줘야 일 적게 하고 많이 쉬지</p>

CSS 1

<style>
    p{
        font-family: 'GMS_Bold';
        font-size: 10vw;   
    }
</style>

CSS 2

<style>
    p{
        font-family: 'GMS_Bold';
        font-size: 10vw;   
    }
    
    /* p.fontPoint (X) ........... <p>를 <a>태그로 변경하면 못 쓰게 되니까. */
    .fontPoint{ 
        font-family: 'GMS_Light';
        font-size: 2vx;
        color: purple;
    }
</style>

CSS 3

<style>
    body{
    	font-size: 30px;
    	color: red;
    }

    p{
        font-family: 'GMS_Medium';
        font-size: 50px;   
    }

    .fontPoint{ 
        font-family: 'GMS_Bold';
        font-size: 2em;
    }
</style>

+) 폰트 유전 요소 : font-family, color, line-height, letter-spacing, font-weight
+) 영어체-한국어-시스템체 순서대로 정의한다.