HTML5-CSS/font.html at master · ViGilanteAF/HTML5-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Font</title>
    <style>
      font.txt {
        font: italic 12px/24px "나눔스퀘어";
      }
      .accent-colors {
        color: darkblue;
      }
      a {
        text-decoration: none;
      }
      .edited {
        text-decoration: line-through;
      }
      .trans1 {
        text-transform: uppercase;
      }
      .trans2 {
        text-transform: capitalize;
      }
      .shadow {
        color: #000;
        text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
          -2px -15px 11px #f80, 2px -19px 18px #f20;
      }
    </style>
  </head>
  <body>
    <p class="txt">여러요소가 함께 사용된 ......중요합니다.</p>
    <p>이럴 때 사용할 수 있는 것이 글꼴 속성입니다.</p>
    <p style="font: caption;">[font:caption] 캡션에 어울리는 글꼴 스타일</p>
    <p style="font: icon;">[font: icon] 아이콘에 어울리는 글꼴 스타일</p>
    <p style="font: menu;">[font: menu] 드롭다운 메뉴에 어울리는 글꼴 스타일</p>
    <p style="font: message-box;">
      [font: message-box] 대화장자에 어울리는 글꼴 스타일
    </p>
    <p style="font: small-caption;">
      [font: small-caption] 작은 캡션에 어울리는 글꼴 스타일
    </p>
    <p style="font: status-bar;">
      [font: status-bar] 상태 표시줄에 어울리는 글꼴 스타일
    </p>
    <p style="font-kerning: auto;">안녕하세요 I am from Republic of Korea</p>
    <p
      style="font-variant-ligatures: no-common-ligatures;"
      class="accent-colors"
    >
      이것이 더욱 보기 좋게 만드는 기능입니다. This option is more looks good
    </p>
    <p style="font-variant-numeric: diagonal-fractions;">1-00-0023123123123</p>
    <p>[<a href="https://www.naver.com" target="_blank">외부링크</a>]</p>
    <p><span class="edited">글자위를 가로지르는 취소 선 삽입</span></p>
    <p class="trans1">HTml(uppercase)</p>
    <p class="trans2">html(capitalize)</p>
    <p class="trans2">Javascript(capitalize)</p>
    <h1 class="shadow">HTML</h1>
  </body>
</html>