Skills/CSS3, SCSS

220902 css_font_test.html

개발자 윤구나 2022. 9. 5. 16:16 
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css_font_test</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap" rel="stylesheet">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Dokdo&display=swap');
     
      @font-face {
        font-family: 'Nanum Pen Script';
        src: url(./font_test/NanumPenScript-Regular.ttf);
      }
      @font-face {
        font-family: 'Do Hyeon';
        src: url(./font_test/DoHyeon-Regular.ttf);
      }
     
      .font01 {
        font-family: 'Gowun Batang', serif;
        font-weight: bold;
        font-size: 14px;
        color: #7e6b5a;
      }
      .font02 {
        font-family: 'Nanum Myeongjo', serif;
        font-style: italic;
        font-size: 16px;
        color: #996c33;
      }
      .font03 {
        font-family: 'Nanum Pen Script', cursive;
        font-size: 12px;
        text-decoration: underline;
      }
      .font04 {
        font-family: 'Do Hyeon', sans-serif;
        font-size: 15px;
        text-indent: 10px;
      }
      .font05 {
        font-family: 'East Sea Dokdo', cursive;
        font-weight: bold;
        font-size: 16px;
        color: #b3d465;
        line-height: 50px;
      }
      .font06 {
        font-family: 'Dokdo', cursive;
        font-weight: bold;
        font-size: 20px;
        text-decoration: underline;
        text-align: right
      }
    </style>
  </head>
  <body>
    <p class="font01">
      1. 오늘 점심은 어떤 메뉴일까?
    </p>
    <p class="font02">
      2. 오늘 점심은 어떤 메뉴일까?
    </p>
    <p class="font03">
      3. 오늘 점심은 어떤 메뉴일까?
    </p>
    <p class="font04">
      4. 오늘 점심은 어떤 메뉴일까?
    </p>
    <p class="font05">
      5. 오늘 점심은 어떤 메뉴일까?
    </p>
    <p class="font06">
      6. 오늘 점심은 어떤 메뉴일까?
    </p>
  </body>
</html>​