@timus-networks/theme 1.0.161 → 1.0.162

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/components-js/ThemeAlert.vue +11 -9
  2. package/components-js/ThemeAvatar.vue +2 -2
  3. package/components-js/ThemeBadge.vue +14 -12
  4. package/components-js/ThemeButtons.vue +2 -2
  5. package/components-js/ThemeCascader.vue +13 -13
  6. package/components-js/ThemeCheckbox.vue +2 -2
  7. package/components-js/ThemeCollapse.vue +9 -7
  8. package/components-js/ThemeDialog.vue +41 -39
  9. package/components-js/ThemeForm.vue +2 -2
  10. package/components-js/ThemeInformation.vue +12 -12
  11. package/components-js/ThemeInputNumbers.vue +19 -17
  12. package/components-js/ThemeInputs.vue +16 -9
  13. package/components-js/ThemeLink.vue +2 -2
  14. package/components-js/ThemeLogo.vue +49 -49
  15. package/components-js/ThemeMessageBox.vue +3 -2
  16. package/components-js/ThemePopover.vue +45 -28
  17. package/components-js/ThemeRadio.vue +19 -19
  18. package/components-js/ThemeSelect.vue +2 -2
  19. package/components-js/ThemeSidebar.vue +2 -2
  20. package/components-js/ThemeTable.vue +2 -2
  21. package/components-js/ThemeTag.vue +2 -2
  22. package/components-js/ThemeToggle.vue +18 -17
  23. package/components-js/ThemeTooltip.vue +16 -14
  24. package/components-js/ThemeTypo.vue +5 -5
  25. package/components-js/ThemeUpload.vue +3 -2
  26. package/components-js/TimusSamples.vue +4 -2
  27. package/components-ts/ThemeAlert.vue +11 -9
  28. package/components-ts/ThemeAvatar.vue +2 -2
  29. package/components-ts/ThemeBadge.vue +14 -12
  30. package/components-ts/ThemeButtons.vue +2 -2
  31. package/components-ts/ThemeCascader.vue +13 -13
  32. package/components-ts/ThemeCheckbox.vue +2 -2
  33. package/components-ts/ThemeCollapse.vue +9 -7
  34. package/components-ts/ThemeDialog.vue +41 -39
  35. package/components-ts/ThemeForm.vue +2 -2
  36. package/components-ts/ThemeInformation.vue +12 -12
  37. package/components-ts/ThemeInputNumbers.vue +19 -17
  38. package/components-ts/ThemeInputs.vue +16 -9
  39. package/components-ts/ThemeLink.vue +2 -2
  40. package/components-ts/ThemeLogo.vue +49 -49
  41. package/components-ts/ThemeMessageBox.vue +3 -2
  42. package/components-ts/ThemePopover.vue +45 -28
  43. package/components-ts/ThemeRadio.vue +21 -19
  44. package/components-ts/ThemeSelect.vue +2 -2
  45. package/components-ts/ThemeSidebar.vue +2 -2
  46. package/components-ts/ThemeTable.vue +2 -2
  47. package/components-ts/ThemeTag.vue +2 -2
  48. package/components-ts/ThemeToggle.vue +18 -17
  49. package/components-ts/ThemeTooltip.vue +16 -14
  50. package/components-ts/ThemeTypo.vue +5 -5
  51. package/components-ts/ThemeUpload.vue +3 -2
  52. package/components-ts/TimusSamples.vue +4 -2
  53. package/fonts/poppins-font-face/Poppins.html +896 -0
  54. package/fonts/poppins-font-face/Poppins.jpg +0 -0
  55. package/fonts/poppins-font-face/README.md +106 -0
  56. package/fonts/poppins-font-face/files/Poppins-Black.eot +0 -0
  57. package/fonts/poppins-font-face/files/Poppins-Black.svg +3099 -0
  58. package/fonts/poppins-font-face/files/Poppins-Black.ttf +0 -0
  59. package/fonts/poppins-font-face/files/Poppins-Black.woff +0 -0
  60. package/fonts/poppins-font-face/files/Poppins-Black.woff2 +0 -0
  61. package/fonts/poppins-font-face/files/Poppins-BlackItalic.ttf +0 -0
  62. package/fonts/poppins-font-face/files/Poppins-Bold.eot +0 -0
  63. package/fonts/poppins-font-face/files/Poppins-Bold.svg +3131 -0
  64. package/fonts/poppins-font-face/files/Poppins-Bold.ttf +0 -0
  65. package/fonts/poppins-font-face/files/Poppins-Bold.woff +0 -0
  66. package/fonts/poppins-font-face/files/Poppins-Bold.woff2 +0 -0
  67. package/fonts/poppins-font-face/files/Poppins-BoldItalic.ttf +0 -0
  68. package/fonts/poppins-font-face/files/Poppins-ExtraBold.eot +0 -0
  69. package/fonts/poppins-font-face/files/Poppins-ExtraBold.svg +3120 -0
  70. package/fonts/poppins-font-face/files/Poppins-ExtraBold.ttf +0 -0
  71. package/fonts/poppins-font-face/files/Poppins-ExtraBold.woff +0 -0
  72. package/fonts/poppins-font-face/files/Poppins-ExtraBold.woff2 +0 -0
  73. package/fonts/poppins-font-face/files/Poppins-ExtraBoldItalic.ttf +0 -0
  74. package/fonts/poppins-font-face/files/Poppins-ExtraLight.eot +0 -0
  75. package/fonts/poppins-font-face/files/Poppins-ExtraLight.svg +3245 -0
  76. package/fonts/poppins-font-face/files/Poppins-ExtraLight.ttf +0 -0
  77. package/fonts/poppins-font-face/files/Poppins-ExtraLight.woff +0 -0
  78. package/fonts/poppins-font-face/files/Poppins-ExtraLight.woff2 +0 -0
  79. package/fonts/poppins-font-face/files/Poppins-ExtraLightItalic.ttf +0 -0
  80. package/fonts/poppins-font-face/files/Poppins-Italic.eot +0 -0
  81. package/fonts/poppins-font-face/files/Poppins-Italic.svg +3414 -0
  82. package/fonts/poppins-font-face/files/Poppins-Italic.ttf +0 -0
  83. package/fonts/poppins-font-face/files/Poppins-Italic.woff +0 -0
  84. package/fonts/poppins-font-face/files/Poppins-Italic.woff2 +0 -0
  85. package/fonts/poppins-font-face/files/Poppins-Light.eot +0 -0
  86. package/fonts/poppins-font-face/files/Poppins-Light.svg +3244 -0
  87. package/fonts/poppins-font-face/files/Poppins-Light.ttf +0 -0
  88. package/fonts/poppins-font-face/files/Poppins-Light.woff +0 -0
  89. package/fonts/poppins-font-face/files/Poppins-Light.woff2 +0 -0
  90. package/fonts/poppins-font-face/files/Poppins-LightItalic.ttf +0 -0
  91. package/fonts/poppins-font-face/files/Poppins-Medium.eot +0 -0
  92. package/fonts/poppins-font-face/files/Poppins-Medium.svg +3190 -0
  93. package/fonts/poppins-font-face/files/Poppins-Medium.ttf +0 -0
  94. package/fonts/poppins-font-face/files/Poppins-Medium.woff +0 -0
  95. package/fonts/poppins-font-face/files/Poppins-Medium.woff2 +0 -0
  96. package/fonts/poppins-font-face/files/Poppins-MediumItalic.ttf +0 -0
  97. package/fonts/poppins-font-face/files/Poppins-Regular.eot +0 -0
  98. package/fonts/poppins-font-face/files/Poppins-Regular.svg +3213 -0
  99. package/fonts/poppins-font-face/files/Poppins-Regular.ttf +0 -0
  100. package/fonts/poppins-font-face/files/Poppins-Regular.woff +0 -0
  101. package/fonts/poppins-font-face/files/Poppins-Regular.woff2 +0 -0
  102. package/fonts/poppins-font-face/files/Poppins-SemiBold.eot +0 -0
  103. package/fonts/poppins-font-face/files/Poppins-SemiBold.svg +3174 -0
  104. package/fonts/poppins-font-face/files/Poppins-SemiBold.ttf +0 -0
  105. package/fonts/poppins-font-face/files/Poppins-SemiBold.woff +0 -0
  106. package/fonts/poppins-font-face/files/Poppins-SemiBold.woff2 +0 -0
  107. package/fonts/poppins-font-face/files/Poppins-SemiBoldItalic.ttf +0 -0
  108. package/fonts/poppins-font-face/files/Poppins-Thin.eot +0 -0
  109. package/fonts/poppins-font-face/files/Poppins-Thin.svg +3266 -0
  110. package/fonts/poppins-font-face/files/Poppins-Thin.ttf +0 -0
  111. package/fonts/poppins-font-face/files/Poppins-Thin.woff +0 -0
  112. package/fonts/poppins-font-face/files/Poppins-Thin.woff2 +0 -0
  113. package/fonts/poppins-font-face/files/Poppins-ThinItalic.ttf +0 -0
  114. package/fonts/poppins-font-face/stylesheet.css +27 -9
  115. package/index.d.ts +1 -1
  116. package/output/main.css +1 -1
  117. package/package.json +1 -1
package/fonts/poppins-font-face/Poppins.html ADDED
@@ -0,0 +1,896 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Webfontworld</title>
8
+ <style>
9
+ * {margin: 0; padding: 0;}
10
+ body {padding-bottom: 200px;}
11
+ li {list-style: none;}
12
+ table {width: 100%}
13
+ hr {margin: 100px 0; border: 0; border-bottom: 1px solid #ebebeb}
14
+ img {width: 100%; vertical-align: top;}
15
+ code, pre {background-color: #f8f8f8;-webkit-font-smoothing: initial;}
16
+ a {text-decoration: none; color: #000;}
17
+
18
+ /* font-face */
19
+ @font-face {
20
+ font-family: 'Poppins';
21
+ font-weight: 100;
22
+ font-style: normal;
23
+ src: url('./files/Poppins-Thin.eot');
24
+ src: url('./files/Poppins-Thin.eot?#iefix') format('embedded-opentype'),
25
+ url('./files/Poppins-Thin.woff2') format('woff2'),
26
+ url('./files/Poppins-Thin.woff') format('woff'),
27
+ url('./files/Poppins-Thin.ttf') format("truetype");
28
+ font-display: swap;
29
+ }
30
+ @font-face {
31
+ font-family: 'Poppins';
32
+ font-weight: 200;
33
+ font-style: normal;
34
+ src: url('./files/Poppins-ExtraLight.eot');
35
+ src: url('./files/Poppins-ExtraLight.eot?#iefix') format('embedded-opentype'),
36
+ url('./files/Poppins-ExtraLight.woff2') format('woff2'),
37
+ url('./files/Poppins-ExtraLight.woff') format('woff'),
38
+ url('./files/Poppins-ExtraLight.ttf') format("truetype");
39
+ font-display: swap;
40
+ }
41
+ @font-face {
42
+ font-family: 'Poppins';
43
+ font-weight: 300;
44
+ font-style: normal;
45
+ src: url('./files/Poppins-Light.eot');
46
+ src: url('./files/Poppins-Light.eot?#iefix') format('embedded-opentype'),
47
+ url('./files/Poppins-Light.woff2') format('woff2'),
48
+ url('./files/Poppins-Light.woff') format('woff'),
49
+ url('./files/Poppins-Light.ttf') format("truetype");
50
+ font-display: swap;
51
+ }
52
+ @font-face {
53
+ font-family: 'Poppins';
54
+ font-weight: 400;
55
+ font-style: normal;
56
+ src: url('./files/Poppins-Regular.eot');
57
+ src: url('./files/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
58
+ url('./files/Poppins-Regular.woff2') format('woff2'),
59
+ url('./files/Poppins-Regular.woff') format('woff'),
60
+ url('./files/Poppins-Regular.ttf') format("truetype");
61
+ font-display: swap;
62
+ }
63
+ @font-face {
64
+ font-family: 'Poppins';
65
+ font-weight: 500;
66
+ font-style: normal;
67
+ src: url('./files/Poppins-Medium.eot');
68
+ src: url('./files/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
69
+ url('./files/Poppins-Medium.woff2') format('woff2'),
70
+ url('./files/Poppins-Medium.woff') format('woff'),
71
+ url('./files/Poppins-Medium.ttf') format("truetype");
72
+ font-display: swap;
73
+ }
74
+ @font-face {
75
+ font-family: 'Poppins';
76
+ font-weight: 600;
77
+ font-style: normal;
78
+ src: url('./files/Poppins-SemiBold.eot');
79
+ src: url('./files/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
80
+ url('./files/Poppins-SemiBold.woff2') format('woff2'),
81
+ url('./files/Poppins-SemiBold.woff') format('woff'),
82
+ url('./files/Poppins-SemiBold.ttf') format("truetype");
83
+ font-display: swap;
84
+ }
85
+ @font-face {
86
+ font-family: 'Poppins';
87
+ font-weight: 700;
88
+ font-style: normal;
89
+ src: url('./files/Poppins-Bold.eot');
90
+ src: url('./files/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
91
+ url('./files/Poppins-Bold.woff2') format('woff2'),
92
+ url('./files/Poppins-Bold.woff') format('woff'),
93
+ url('./files/Poppins-Bold.ttf') format("truetype");
94
+ font-display: swap;
95
+ }
96
+ @font-face {
97
+ font-family: 'Poppins';
98
+ font-weight: 800;
99
+ font-style: normal;
100
+ src: url('./files/Poppins-ExtraBold.eot');
101
+ src: url('./files/Poppins-ExtraBold.eot?#iefix') format('embedded-opentype'),
102
+ url('./files/Poppins-ExtraBold.woff2') format('woff2'),
103
+ url('./files/Poppins-ExtraBold.woff') format('woff'),
104
+ url('./files/Poppins-ExtraBold.ttf') format("truetype");
105
+ font-display: swap;
106
+ }
107
+ @font-face {
108
+ font-family: 'Poppins';
109
+ font-weight: 900;
110
+ font-style: normal;
111
+ src: url('./files/Poppins-Black.eot');
112
+ src: url('./files/Poppins-Black.eot?#iefix') format('embedded-opentype'),
113
+ url('./files/Poppins-Black.woff2') format('woff2'),
114
+ url('./files/Poppins-Black.woff') format('woff'),
115
+ url('./files/Poppins-Black.ttf') format("truetype");
116
+ font-display: swap;
117
+ }
118
+ code, pre {font-family: 'Poppins';}
119
+ .weightInput {font-family: 'Poppins';}
120
+ .hgroup h1 {font-family: 'Poppins';}
121
+ .ff {font-family: 'Poppins';}
122
+ .fw {font-weight: 400 !important;}
123
+
124
+ .comments h2 {font-family: 'Poppins';}
125
+ .comments .comment-list ul li p {font-family: 'Poppins';}
126
+ .comments .comment-form textarea {font-family: 'Poppins';}
127
+ .comments .comment-form .submit .btn {font-family: 'Poppins';}
128
+ .related-articles ul li .title {font-family: 'Poppins';}
129
+ .tags {font-family: 'Poppins';}
130
+
131
+ #webfontworld {padding-top: 200px;}
132
+ .wf-intro {width: 100%; max-width: 1200px; margin: 0 auto;}
133
+ .wf-view {width: 100%; max-width: 1200px; margin: 0 auto;}
134
+ .wf-weight {width: 100%; max-width: 1200px; margin: 0 auto;}
135
+ .wf-layout {width: 100%; max-width: 1200px; margin: 0 auto;}
136
+ .wf-size {width: 100%; max-width: 1200px; margin: 0 auto;}
137
+ .wf-info {width: 100%; max-width: 1200px; margin: 0 auto;}
138
+ .wf-woff {width: 100%; max-width: 1200px; margin: 0 auto;}
139
+ .wf-cross {width: 100%; max-width: 1200px; margin: 0 auto;}
140
+ .wf-style {width: 100%; max-width: 1200px; margin: 0 auto;}
141
+ .weightInput {width: 100%; padding: 20px 40px; margin: 20px 0 10px; background: #f1f1f1; border: 0; border-radius: 50px; font-size: 16px; box-sizing: border-box;}
142
+
143
+ .wf-intro .info {display: flex; flex-wrap: wrap; justify-content: space-between;}
144
+ .wf-intro .info .img {width: 32%; }
145
+ .wf-intro .info .click {width: 66%; }
146
+ .wf-intro .info .click table {border: 1px solid #dadce0; border-bottom: 0; border-spacing: 0;}
147
+ .wf-intro .info .click table th {width: 50%; padding: 19px 24px 15px 24px; border-bottom: 1px solid #dadce0; background-color: #e8f2ff;}
148
+ .wf-intro .info .click table td {width: 50%; height: 20px; padding: 19px 24px 15px 24px; border-right: 1px solid #dadce0; border-bottom: 1px dashed #dadce0; text-align: center;}
149
+ .wf-intro .info .click table td:last-child {border-right: 0;}
150
+ .wf-intro .info .click table tr:last-child td {border-bottom-style: solid}
151
+ .wf-intro .info .click table td:hover {background: #e8f2ff; cursor: pointer;}
152
+ .wf-intro .info .click .down {margin-top: 9px;}
153
+ .wf-intro .info .click .down a {background: #000; color: #fff; padding: 15px 44px 15px 24px; margin-right: 10px; display: inline-block; position: relative;}
154
+ .wf-intro .info .click .down a::after {content: ''; background-image: url(https://hangeul.naver.com/img/sp_assorted_font_v2.png); background-size: 260px 201px; background-position: -28px -149px; position: absolute; right: 16px; top: 12px; width: 23px; height: 22px;}
155
+ .wf-intro .css {margin-top: 80px;}
156
+ .wf-intro .css h3 {font-size: 34px; margin-bottom: 20px; margin-top: 40px;}
157
+ .wf-intro .css .menu {border-bottom: 1px solid #dadce0; height: 56px;}
158
+ .wf-intro .css .menu li {display: inline; font-size: 18px; margin-bottom: 10px;}
159
+ .wf-intro .css .menu li a {padding: 19px 24px 15px 24px; display: inline-block; height: 21px;}
160
+ .wf-intro .css .menu li.active a { background: #e8f2ff; border-bottom: 2px solid #174ea6;}
161
+ .wf-intro .css .cont {margin-top: 20px;}
162
+ .wf-intro .css pre {padding: 20px; line-height: 1.6;}
163
+
164
+ .wf-info .license {margin-top: 80px;}
165
+ .wf-info .license h3 {width: 100%; font-size: 34px; margin-bottom: 20px; margin-top: 40px;}
166
+ .wf-info .license table { border-spacing: 0; font-size: 18px;}
167
+ .wf-info .license table th {padding: 19px 24px 15px 24px; background-color: #e8f2ff; border-bottom: 2px solid #174ea6; text-align: center;}
168
+ .wf-info .license table td {padding: 19px 24px 15px 24px; border-bottom: 1px solid #dadce0; text-align: center; border-right: 1px solid #dadce0}
169
+ .wf-info .license table td:last-child {border-right: 0;}
170
+ .wf-info .license table td.red {color: red}
171
+ .wf-info .license p {margin-top: 20px; line-height: 1.6;}
172
+ .wf-info .list {padding-top: 30px;}
173
+ .wf-info .list li {line-height: 1.8; position: relative; padding-left: 15px;}
174
+ .wf-info .list li::before {content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; background: #000; border-radius: 50%;}
175
+ .wf-info .list li.line {text-decoration: underline;}
176
+
177
+ .wf-weight h3 {font-size: 34px; margin-top: 40px;}
178
+ .wf-weight li {padding: 60px 0 20px; font-size: 40px; border-bottom: 1px solid #f1f1f1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative;}
179
+ .wf-weight li.wNormal {font-weight: normal;}
180
+ .wf-weight li.w100 {font-weight: 100;}
181
+ .wf-weight li.w200 {font-weight: 200;}
182
+ .wf-weight li.w300 {font-weight: 300;}
183
+ .wf-weight li.w400 {font-weight: 400;}
184
+ .wf-weight li.w500 {font-weight: 500;}
185
+ .wf-weight li.w600 {font-weight: 600;}
186
+ .wf-weight li.w700 {font-weight: 700;}
187
+ .wf-weight li.w800 {font-weight: 800;}
188
+ .wf-weight li.w900 {font-weight: 900;}
189
+ .wf-weight li::before {position: absolute; left: 0; top: 20px; font-size: 14px; background: #f1f1f1; padding: 3px 20px; border-radius: 20px;}
190
+ .wf-weight li.wNormal::before {content: 'font-weight: normal';}
191
+ .wf-weight li.w100::before {content: 'font-weight: 100';}
192
+ .wf-weight li.w200::before {content: 'font-weight: 200';}
193
+ .wf-weight li.w300::before {content: 'font-weight: 300';}
194
+ .wf-weight li.w400::before {content: 'font-weight: 400';}
195
+ .wf-weight li.w500::before {content: 'font-weight: 500';}
196
+ .wf-weight li.w600::before {content: 'font-weight: 600';}
197
+ .wf-weight li.w700::before {content: 'font-weight: 700';}
198
+ .wf-weight li.w800::before {content: 'font-weight: 800';}
199
+ .wf-weight li.w900::before {content: 'font-weight: 900';}
200
+
201
+ .wf-size h3 {font-size: 34px; margin-top: 100px;}
202
+ .wf-size ul {margin-top: 10px;}
203
+ .wf-size li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 60px; line-height: 1.7;}
204
+ .wf-size h3 span {font-size: 14px; background: #f1f1f1; padding: 3px 20px; border-radius: 20px; margin-right: 5px; vertical-align: 2px; cursor: pointer; font-weight: normal;}
205
+ .wf-size h3 span.active{background-color: #000;color: #fff;}
206
+ .wf-size li::before {content: ''; position: absolute; left: 0; top: 0px; font-size: 12px;}
207
+ .wf-size li.s10 {font-size: 10px;} .wf-size li.s10::before {content: '10px'; font-size: 10px;}
208
+ .wf-size li.s12 {font-size: 12px;} .wf-size li.s12::before {content: '12px';}
209
+ .wf-size li.s14 {font-size: 14px;} .wf-size li.s14::before {content: '14px';}
210
+ .wf-size li.s16 {font-size: 16px;} .wf-size li.s16::before {content: '16px';}
211
+ .wf-size li.s18 {font-size: 18px;} .wf-size li.s18::before {content: '18px';}
212
+ .wf-size li.s20 {font-size: 20px;} .wf-size li.s20::before {content: '20px';}
213
+ .wf-size li.s24 {font-size: 24px;} .wf-size li.s24::before {content: '24px';}
214
+ .wf-size li.s28 {font-size: 28px;} .wf-size li.s28::before {content: '28px';}
215
+ .wf-size li.s32 {font-size: 32px;} .wf-size li.s32::before {content: '32px';}
216
+ .wf-size li.s36 {font-size: 36px;} .wf-size li.s36::before {content: '36px';}
217
+ .wf-size li.s40 {font-size: 40px;} .wf-size li.s40::before {content: '40px';}
218
+ .wf-size li.s48 {font-size: 48px;} .wf-size li.s48::before {content: '48px';}
219
+ .wf-size li.s56 {font-size: 56px;} .wf-size li.s56::before {content: '56px';}
220
+ .wf-size li.s64 {font-size: 64px;} .wf-size li.s64::before {content: '64px';}
221
+
222
+ .wf-layout h3 {font-size: 34px; margin-top: 100px;}
223
+ .wf-layout h3 span {font-size: 14px; background: #f1f1f1; padding: 3px 20px; border-radius: 20px; margin-right: 5px; vertical-align: 2px; cursor: pointer; font-weight: normal;}
224
+ .wf-layout h3 span.active {background-color: #000; color: #fff;}
225
+ .wf-layout .flex {overflow: hidden; margin-top: 20px;}
226
+ .wf-layout .flex div {float: left; line-height: 1.4; margin-right: 2%; margin-bottom: 2%; text-align: justify;}
227
+ .wf-layout .flex .last {margin-right: 0;}
228
+ .wf-layout .flex .col4 {width: 23.5%;}
229
+ .wf-layout .flex .col3 {width: 32%}
230
+ .wf-layout .flex .col2 {width: 49%}
231
+ .wf-layout .flex .col1 {width: 100%; margin-right: 0;}
232
+
233
+ .wf-view h3 {font-size: 34px; margin-bottom: 20px; margin-top: 100px;}
234
+ .wf-view h3 span {font-size: 14px; background: #f1f1f1; padding: 3px 20px; border-radius: 20px; margin-right: 5px; vertical-align: 2px; cursor: pointer; font-weight: normal;}
235
+ .wf-view h3 span.active {background-color: #000; color: #fff;}
236
+ .wf-view .view {height: 500px; display: flex; align-items: center; justify-content: center; background: #f8f8f8;}
237
+ .wf-view .view > div {text-align: center; font-size: 8vw; }
238
+ .wf-view .view strong {display: block; font-weight: normal;}
239
+ .wf-view .view em {display: block; font-style: normal; font-size: 4vw; margin-top: 1vw;}
240
+ .wf-view .style {margin-bottom: 20px;}
241
+ .wf-view .style > span {position: relative; display: inline-block; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #f8f8f8; border: 2px solid #000; cursor: pointer;}
242
+ .wf-view .style > span::after {content: ''; width: 60px; height: 60px; background: #000; position: absolute; right: -30px; bottom: -23px; transform: rotate(45deg);}
243
+ .wf-view .style .style1 {background: #f8f8f8;}
244
+ .wf-view .style .style1::after {background: #000;}
245
+ .wf-view .style .style2 {background: #000;}
246
+ .wf-view .style .style2::after {background: #f8f8f8;}
247
+ .wf-view .style .style3 {background: rgb(231, 50, 50);}
248
+ .wf-view .style .style3::after {background: #fff;}
249
+ .wf-view .style .style4 {background: rgb(50, 110, 231);}
250
+ .wf-view .style .style4::after {background: #fff;}
251
+ .wf-view .style .style5 {background: rgb(195, 231, 50);}
252
+ .wf-view .style .style5::after {background: #fff;}
253
+ .wf-view .style .style6 {background: rgb(153, 50, 231);}
254
+ .wf-view .style .style6::after {background: #fff;}
255
+ .wf-view .style .style7 {background: #C0E2E3;}
256
+ .wf-view .style .style7::after {background: #DE4E40;}
257
+ .wf-view .style .style8 {background: #77DBD1;}
258
+ .wf-view .style .style8::after {background: #765b59;}
259
+ .wf-view .style .style9 {background: #1A2678;}
260
+ .wf-view .style .style9::after {background: #E9C4BA;}
261
+ .wf-view .style .style10 {background: #FBEF82;}
262
+ .wf-view .style .style10::after {background: #C2323A;}
263
+ .wf-view .style .style11 {background: #4C3B4A;}
264
+ .wf-view .style .style11::after {background: #D65C57;}
265
+ .wf-view .style .style12 {background: #937CCA;}
266
+ .wf-view .style .style12::after {background: #F9D8A1;}
267
+ .wf-view .style .style13 {background: #194685;}
268
+ .wf-view .style .style13::after {background: #FAFA54;}
269
+
270
+ .wf-woff {margin-top: 80px;}
271
+ .wf-woff h3 {font-size: 34px; margin-bottom: 20px; margin-top: 40px;}
272
+ .wf-woff table {border-spacing: 0; border-top: 1px solid #dadce0; line-height: 1.5;}
273
+ .wf-woff table th {padding: 14px; background-color: #e8f2ff; border-bottom: 1px solid #dadce0; border-right: 1px solid #dadce0; text-align: left;}
274
+ .wf-woff table td {padding: 14px; border-bottom: 1px solid #dadce0; border-right: 1px solid #dadce0}
275
+ .wf-woff table td:last-child {border-right: 0;}
276
+ .wf-woff table tr.last td {border-bottom: 2px solid #000;}
277
+ .wf-woff table tr.last th {border-bottom: 2px solid #000;}
278
+ .wf-woff table .line {border-bottom: 2px solid #000; text-align: center;}
279
+ .wf-woff table .ce {text-align: center;}
280
+ .wf-woff table .bg {background-color: #f5f5f5;}
281
+ .wf-woff table small {display: block;}
282
+
283
+ .wf-cross {margin-top: 80px;}
284
+ .wf-cross h3 {font-size: 34px; margin-bottom: 20px; margin-top: 40px;}
285
+ .wf-cross table {text-align: center; border-spacing: 0;}
286
+ .wf-cross table th {padding: 19px 24px 15px 24px; border-bottom: 1px solid #dadce0; background: #e8f2ff;}
287
+ .wf-cross table td {padding: 19px 24px 15px 24px; border-bottom: 1px solid #dadce0;}
288
+ .wf-cross table .red {background: #ffe8e8; color: red}
289
+
290
+ nav {padding: 100px 50px 100px; font-family: 'NEXONLv1Gothic';}
291
+ nav li {display: inline-block; margin-bottom: 10px;}
292
+ nav li a {background: #fff; color: #000; border: 1px solid #000; padding: 7px 14px 5px; display: inline-block; border-radius: 50px;}
293
+ nav li.active a {background: #000; color: #fff;}
294
+ </style>
295
+ </head>
296
+ <body>
297
+
298
+ <div id="webfontworld">
299
+ <div class="wf-intro ff">
300
+ <div class="info">
301
+ <div class="img">
302
+ <img src="./files/Poppins.jpg" alt="Poppins">
303
+ </div>
304
+
305
+ <div class="click">
306
+ <table>
307
+ <colgroup>
308
+ <col style="width: 30%" />
309
+ <col style="width: 70%" />
310
+ </colgroup>
311
+ <tr>
312
+ <th colspan="2">Poppins</a></th>
313
+ </tr>
314
+ <tr>
315
+ <td colspan="2"><a href="https://wess.tistory.com/pages/hangul">Goggle</a></td>
316
+ </tr>
317
+ <tr>
318
+ <td colspan="2"><a href="https://wess.tistory.com/pages/english">a b c d e f g h i j k l n m o p q r s t u w x y z</a></td>
319
+ </tr>
320
+ <tr>
321
+ <td colspan="2"><a href="https://wess.tistory.com/pages/number">1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & *</a></td>
322
+ </tr>
323
+ <tr>
324
+ <td><a href="https://wess.tistory.com/pages/gothic">Goggle</a></td>
325
+ <td><a href="https://wess.tistory.com/pages/company">Goggle</a></td>
326
+ </tr>
327
+ <tr>
328
+ <td><a href="https://wess.tistory.com/pages/style">5style</a></td>
329
+ <td><a href="https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL">Open Font License.</a></td>
330
+ </tr>
331
+ </table>
332
+ <div class="down">
333
+ <a href="https://fonts.google.com/specimen/Poppins?query=po" target="_blank">Download</a>
334
+ <a href="https://github.com/webfontworld/Poppins" target="_blank">Web Font Download</a>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <div class="css fw">
340
+ <h3 class="fw">Using web fonts</h3>
341
+ <div class="menu">
342
+ <ul>
343
+ <li class="active"><a href="#c">CSS Setting</a></li>
344
+ <li><a href="#c">link Setting</a></li>
345
+ <li><a href="#c">import Setting</a></li>
346
+ <li><a href="#c">font-face Setting</a></li>
347
+ <li><a href="#c">Google Setting</a></li>
348
+ </ul>
349
+ </div>
350
+ <div class="cont">
351
+ <div>
352
+ <pre><code>font-family: 'Poppins';</code></pre>
353
+ </div>
354
+ <div>
355
+ <pre><code>&lt;link href="https://webfontworld.github.io/Poppins/Poppins.css" rel="stylesheet"&gt;</code></pre>
356
+ </div>
357
+ <div>
358
+ <pre><code>@import url('https://webfontworld.github.io/Poppins/Poppins.css');</code></pre>
359
+ </div>
360
+ <div>
361
+ <pre><code>@font-face {
362
+ font-family: 'Poppins';
363
+ font-weight: 100;
364
+ font-style: normal;
365
+ src: url('./files/Poppins-Thin.eot');
366
+ src: url('./files/Poppins-Thin.eot?#iefix') format('embedded-opentype'),
367
+ url('./files/Poppins-Thin.woff2') format('woff2'),
368
+ url('./files/Poppins-Thin.woff') format('woff'),
369
+ url('./files/Poppins-Thin.ttf') format("truetype");
370
+ font-display: swap;
371
+ }
372
+ @font-face {
373
+ font-family: 'Poppins';
374
+ font-weight: 200;
375
+ font-style: normal;
376
+ src: url('./files/Poppins-ExtraLight.eot');
377
+ src: url('./files/Poppins-ExtraLight.eot?#iefix') format('embedded-opentype'),
378
+ url('./files/Poppins-ExtraLight.woff2') format('woff2'),
379
+ url('./files/Poppins-ExtraLight.woff') format('woff'),
380
+ url('./files/Poppins-ExtraLight.ttf') format("truetype");
381
+ font-display: swap;
382
+ }
383
+ @font-face {
384
+ font-family: 'Poppins';
385
+ font-weight: 300;
386
+ font-style: normal;
387
+ src: url('./files/Poppins-Light.eot');
388
+ src: url('./files/Poppins-Light.eot?#iefix') format('embedded-opentype'),
389
+ url('./files/Poppins-Light.woff2') format('woff2'),
390
+ url('./files/Poppins-Light.woff') format('woff'),
391
+ url('./files/Poppins-Light.ttf') format("truetype");
392
+ font-display: swap;
393
+ }
394
+ @font-face {
395
+ font-family: 'Poppins';
396
+ font-weight: 400;
397
+ font-style: normal;
398
+ src: url('./files/Poppins-Regular.eot');
399
+ src: url('./files/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
400
+ url('./files/Poppins-Regular.woff2') format('woff2'),
401
+ url('./files/Poppins-Regular.woff') format('woff'),
402
+ url('./files/Poppins-Regular.ttf') format("truetype");
403
+ font-display: swap;
404
+ }
405
+ @font-face {
406
+ font-family: 'Poppins';
407
+ font-weight: 500;
408
+ font-style: normal;
409
+ src: url('./files/Poppins-Medium.eot');
410
+ src: url('./files/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
411
+ url('./files/Poppins-Medium.woff2') format('woff2'),
412
+ url('./files/Poppins-Medium.woff') format('woff'),
413
+ url('./files/Poppins-Medium.ttf') format("truetype");
414
+ font-display: swap;
415
+ }
416
+ @font-face {
417
+ font-family: 'Poppins';
418
+ font-weight: 600;
419
+ font-style: normal;
420
+ src: url('./files/Poppins-SemiBold.eot');
421
+ src: url('./files/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
422
+ url('./files/Poppins-SemiBold.woff2') format('woff2'),
423
+ url('./files/Poppins-SemiBold.woff') format('woff'),
424
+ url('./files/Poppins-SemiBold.ttf') format("truetype");
425
+ font-display: swap;
426
+ }
427
+ @font-face {
428
+ font-family: 'Poppins';
429
+ font-weight: 700;
430
+ font-style: normal;
431
+ src: url('./files/Poppins-Bold.eot');
432
+ src: url('./files/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
433
+ url('./files/Poppins-Bold.woff2') format('woff2'),
434
+ url('./files/Poppins-Bold.woff') format('woff'),
435
+ url('./files/Poppins-Bold.ttf') format("truetype");
436
+ font-display: swap;
437
+ }
438
+ @font-face {
439
+ font-family: 'Poppins';
440
+ font-weight: 800;
441
+ font-style: normal;
442
+ src: url('./files/Poppins-ExtraBold.eot');
443
+ src: url('./files/Poppins-ExtraBold.eot?#iefix') format('embedded-opentype'),
444
+ url('./files/Poppins-ExtraBold.woff2') format('woff2'),
445
+ url('./files/Poppins-ExtraBold.woff') format('woff'),
446
+ url('./files/Poppins-ExtraBold.ttf') format("truetype");
447
+ font-display: swap;
448
+ }
449
+ @font-face {
450
+ font-family: 'Poppins';
451
+ font-weight: 900;
452
+ font-style: normal;
453
+ src: url('./files/Poppins-Black.eot');
454
+ src: url('./files/Poppins-Black.eot?#iefix') format('embedded-opentype'),
455
+ url('./files/Poppins-Black.woff2') format('woff2'),
456
+ url('./files/Poppins-Black.woff') format('woff'),
457
+ url('./files/Poppins-Black.ttf') format("truetype");
458
+ font-display: swap;
459
+ }
460
+ </code></pre>
461
+ </div>
462
+ <div>
463
+ <pre><code>//link
464
+ &lt;link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"&gt;
465
+ //import
466
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
467
+ </code></pre>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="wf-view ff">
474
+ <h3 class="fw">Fonts View <span>100</span><span>200</span><span>300</span><span class="active">400</span><span>500</span><span>600</span><span>700</span><span>800</span><span>900</span></h3>
475
+ <div class="style">
476
+ <span class="style1" data-bg1="#f8f8f8" data-bg2="#000"></span>
477
+ <span class="style2" data-bg1="#000" data-bg2="#fff"></span>
478
+ <span class="style3" data-bg1="#e73231" data-bg2="#fff"></span>
479
+ <span class="style4" data-bg1="#326ee6" data-bg2="#fff"></span>
480
+ <span class="style5" data-bg1="#c3e732" data-bg2="#fff"></span>
481
+ <span class="style6" data-bg1="#9932e7" data-bg2="#fff"></span>
482
+ <span class="style7" data-bg1="#C0E2E3" data-bg2="#DE4E40"></span>
483
+ <span class="style8" data-bg1="#77DBD1" data-bg2="#765b59"></span>
484
+ <span class="style9" data-bg1="#1A2678" data-bg2="#E9C4BA"></span>
485
+ <span class="style10" data-bg1="#FBEF82" data-bg2="#C2323A"></span>
486
+ <span class="style11" data-bg1="#4C3B4A" data-bg2="#D65C57"></span>
487
+ <span class="style12" data-bg1="#937CCA" data-bg2="#F9D8A1"></span>
488
+ <span class="style13" data-bg1="#194685" data-bg2="#FAFA54"></span>
489
+ </div>
490
+ <div class="view">
491
+ <div>
492
+ <strong>Poppins</strong>
493
+ <em>google font</em>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <hr>
499
+
500
+ <div class="wf-weight ff">
501
+ <h3>font-weight</h3>
502
+ <input type="text" id="wf-weight-input" class="weightInput" placeholder="Enter text and it will change!">
503
+ <ul class="wf-weight-preview">
504
+ <li class="w100" title="100">There are several WEIGHTs of this font. There are several WEIGHTs of this font. There are several WEIGHTs of this font.</li>
505
+ <li class="w200" title="200">There are several WEIGHTs of this font. There are several WEIGHTs of this font. There are several WEIGHTs of this font.</li>
506
+ <li class="w300" title="300">There are several WEIGHTs of this font. There are several WEIGHTs of this font. There are several WEIGHTs of this font.</li>
507
+ <li class="w400" title="400">There are several WEIGHTs of this font. There are several WEIGHTs of this font. There are several WEIGHTs of this font.</li>
508
+ <li class="w500" title="500">There are several WEIGHTs of this font. There are several WEIGHTs of this font. There are several WEIGHTs of this font.</li>
509
+ <li class="w600" title="600">There are several WEIGHTs of this font. There are several WEIGHTs of this font. There are several WEIGHTs of this font.</li>
510
+ <li class="w700" title="700">There are several WEIGHTs of this font. There are several WEIGHTs of this font. There are several WEIGHTs of this font.</li>
511
+ <li class="w800" title="800">There are several WEIGHTs of this font. There are several WEIGHTs of this font. There are several WEIGHTs of this font.</li>
512
+ <li class="w900" title="900">There are several WEIGHTs of this font. There are several WEIGHTs of this font. There are several WEIGHTs of this font.</li>
513
+ </ul>
514
+ </div>
515
+ <!-- //weight -->
516
+
517
+ <div class="wf-size ff fw">
518
+ <h3>font-size <span data-weight="font-weight:100">100</span><span data-weight="font-weight:200">200</span><span data-weight="font-weight:300">300</span><span class="active" data-weight="font-weight:400">400</span><span data-weight="font-weight:500">500</span><span data-weight="font-weight:600">600</span><span data-weight="font-weight:700">700</span><span data-weight="font-weight:800">800</span><span data-weight="font-weight:900">900</span></h3>
519
+ <input type="text" id="wf-size-input" class="weightInput" placeholder="Enter text and it will change!">
520
+ <ul class="wf-size-preview">
521
+ <li class="s10">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
522
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9</li>
523
+ <li class="s12">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
524
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9</li>
525
+ <li class="s14">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
526
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
527
+ <li class="s16">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
528
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
529
+ <li class="s18">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
530
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
531
+ <li class="s20">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
532
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
533
+ <li class="s24">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
534
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
535
+ <li class="s28">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
536
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
537
+ <li class="s32">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
538
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
539
+ <li class="s36">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
540
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
541
+ <li class="s40">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
542
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
543
+ <li class="s48">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
544
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
545
+ <li class="s56">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
546
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
547
+ <li class="s64">a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
548
+ a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 </li>
549
+ </ul>
550
+ </div>
551
+ <!-- //size -->
552
+
553
+ <div class="wf-layout ff fw">
554
+ <h3>Font-layout <span>100</span><span>200</span><span>300</span><span class="active">400</span><span>500</span><span>600</span><span>700</span><span>800</span><span>900</span></h3>
555
+ <input type="text" id="wf-layout-input" class="weightInput" placeholder="Enter text and it will change!">
556
+ <div class="flex">
557
+ <div class="col4">All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
558
+ The people belong to the people, and all power comes from the people.</div>
559
+ <div class="col4">All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
560
+ The people belong to the people, and all power comes from the people.</div>
561
+ <div class="col4">All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
562
+ The people belong to the people, and all power comes from the people.</div>
563
+ <div class="col4 last">All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
564
+ The people belong to the people, and all power comes from the people.</div>
565
+ <div class="col3">All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
566
+ The people belong to the people, and all power comes from the people.</div>
567
+ <div class="col3">All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
568
+ The people belong to the people, and all power comes from the people.</div>
569
+ <div class="col3 last">All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
570
+ The people belong to the people, and all power comes from the people.</div>
571
+ <div class="col2">All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
572
+ The people belong to the people, and all power comes from the people. All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
573
+ The people belong to the people, and all power comes from the people.</div>
574
+ <div class="col2 last">All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
575
+ The people belong to the people, and all power comes from the people. All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
576
+ The people belong to the people, and all power comes from the people.</div>
577
+ <div class="col1">All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
578
+ The people belong to the people, and all power comes from the people. All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
579
+ The people belong to the people, and all power comes from the people. All citizens have dignity and value as human beings and have the right to pursue happiness. The state has the duty to confirm and guarantee the inviolable basic human rights of individuals. Korea's sovereignty
580
+ The people belong to the people, and all power comes from the people.</div>
581
+ </div>
582
+ </div>
583
+
584
+ <hr>
585
+
586
+ <div class="wf-info ff">
587
+ <div class="license">
588
+ <h3 class="fw">Check the license usage scope</h3>
589
+ <table class="fw">
590
+ <thead>
591
+ <tr>
592
+ <th class="fw">Category</th>
593
+ <th class="fw">Scope of use</th>
594
+ <th class="fw">Permit</th>
595
+ </tr>
596
+ </thead>
597
+ <tbody>
598
+ <tr>
599
+ <td rowspan="5">Print</td>
600
+ <td>Printed brochures, catalogs, DMs, flyers, posters, packages, calendars, etc</td>
601
+ <td>Reference</td>
602
+ </tr>
603
+ <tr>
604
+ <td>Publications such as books, comic books, magazines, periodicals, and newspapers</td>
605
+ <td>Reference</td>
606
+ </tr>
607
+ <tr>
608
+ <td>Signs, banners, panels, etc.</td>
609
+ <td>Reference</td>
610
+ </tr>
611
+ <tr>
612
+ <td>Advertisements such as newspaper advertisements, magazine advertisements</td>
613
+ <td>Reference</td>
614
+ </tr>
615
+ <tr>
616
+ <td>Create PDF files for printing and document sharing</td>
617
+ <td>Reference</td>
618
+ </tr>
619
+ <tr>
620
+ <td rowspan="2">Website</td>
621
+ <td>Web page, advertisement banner, mail, E-brochure, etc</td>
622
+ <td>Reference</td>
623
+ </tr>
624
+ <tr>
625
+ <td>Font for web server</td>
626
+ <td>Reference</td>
627
+ </tr>
628
+ <tr>
629
+ <td rowspan="5">Video</td>
630
+ <td>Broadcast and video subtitles</td>
631
+ <td>Reference</td>
632
+ </tr>
633
+ <tr>
634
+ <td>TV-CF, online video advertisement</td>
635
+ <td>Reference</td>
636
+ </tr>
637
+ <tr>
638
+ <td>Movie (DVD / video), opening and ending credits subtitles</td>
639
+ <td>Reference</td>
640
+ </tr>
641
+ <tr>
642
+ <td>Personal UCC and promotional materials</td>
643
+ <td>Reference</td>
644
+ </tr>
645
+ <tr>
646
+ <td>E-Learning content, online video lectures, flash lectures</td>
647
+ <td>Reference</td>
648
+ </tr>
649
+ <tr>
650
+ <td>Wrapping paper</td>
651
+ <td>Package of goods for sale</td>
652
+ <td>Reference</td>
653
+ </tr>
654
+ <tr>
655
+ <td>Embedding</td>
656
+ <td>Font loading in website and program server, E-book production</td>
657
+ <td>Reference</td>
658
+ </tr>
659
+ <tr>
660
+ <td>BI/CI</td>
661
+ <td>Company name, brand name, product name, logo, mark, slogan, catchphrase</td>
662
+ <td>Reference</td>
663
+ </tr>
664
+ <tr>
665
+ <td rowspan="2">OFL</td>
666
+ <td class="red">Modification, editing and redistribution of font files</td>
667
+ <td class="red">Reference</td>
668
+ </tr>
669
+ <tr>
670
+ <td class="red">Paid sales of font files</td>
671
+ <td class="red">Reference</td>
672
+ </tr>
673
+ <tr>
674
+ <td rowspan="2">Purpose</td>
675
+ <td>Personal use</td>
676
+ <td>Reference</td>
677
+ </tr>
678
+ <tr>
679
+ <td>Commercial use</td>
680
+ <td>Reference</td>
681
+ </tr>
682
+ <tr>
683
+ <td>Source</td>
684
+ <td>Source Display</td>
685
+ <td>Reference</td>
686
+ </tr>
687
+ </tbody>
688
+ </table>
689
+ </div>
690
+ <ul class="list fw">
691
+ <li>You can use them freely in your products & projects - print or digital, commercial or otherwise.</li>
692
+ <li>This isn't legal advice, please consider consulting a lawyer and see the full license for all details.</li>
693
+ <li class="line">All rights, including intellectual property rights, of all fonts provided are reserved by the manufacturer, so please check the manufacturer's website before using.</li>
694
+ </ul>
695
+ </div>
696
+
697
+ <hr>
698
+
699
+ <div class="wf-cross ff">
700
+ <h3 class="fw">Web Font Compatibility</h3>
701
+ <table>
702
+ <tr>
703
+ <th></th>
704
+ <th><img src="https://tistory2.daumcdn.net/tistory/2933724/skin/images/icon-ie9.png" style="width:30px" alt="익스플로러"></th>
705
+ <th><img src="https://tistory3.daumcdn.net/tistory/2851562/skin/images/edge.png" style="width:30px" alt="엣지"></th>
706
+ <th><img src="https://tistory3.daumcdn.net/tistory/2851562/skin/images/firefox.png" style="width:30px" alt="파이어폭스"></th>
707
+ <th><img src="https://tistory4.daumcdn.net/tistory/2851562/skin/images/safari.gif" style="width:30px" alt="사파리"></th>
708
+ <th><img src="https://tistory2.daumcdn.net/tistory/2851562/skin/images/opera.gif" style="width:30px" alt="오페라"></th>
709
+ <th><img src="https://tistory2.daumcdn.net/tistory/2851562/skin/images/chrome.png" style="width:30px" alt="크롬"></th>
710
+ <th><img src="https://tistory3.daumcdn.net/tistory/2851562/skin/images/whale.png" style="width:30px" alt="웨일"></th>
711
+ </tr>
712
+ <tr>
713
+ <td>TTF</td>
714
+ <td><span>○</span></td>
715
+ <td><span>○</span></td>
716
+ <td><span>○</span></td>
717
+ <td><span>○</span></td>
718
+ <td><span>○</span></td>
719
+ <td><span>○</span></td>
720
+ <td><span>○</span></td>
721
+ </tr>
722
+ <tr>
723
+ <td>OTF</td>
724
+ <td><span>○</span></td>
725
+ <td><span>○</span></td>
726
+ <td><span>○</span></td>
727
+ <td><span>○</span></td>
728
+ <td><span>○</span></td>
729
+ <td><span>○</span></td>
730
+ <td><span>○</span></td>
731
+ </tr>
732
+ <tr>
733
+ <td>WOFF</td>
734
+ <td><span title="익스플로러 9.0버전 부터 지원">○</span></td>
735
+ <td><span>○</span></td>
736
+ <td><span>○</span></td>
737
+ <td><span>○</span></td>
738
+ <td><span>○</span></td>
739
+ <td><span>○</span></td>
740
+ <td><span>○</span></td>
741
+ </tr>
742
+ <tr>
743
+ <td>WOFF2</td>
744
+ <td class="red"><span>No support</span></td>
745
+ <td><span>○</span></td>
746
+ <td><span>○</span></td>
747
+ <td><span>○</span></td>
748
+ <td><span>○</span></td>
749
+ <td><span>○</span></td>
750
+ <td><span>○</span></td>
751
+ </tr>
752
+ <tr>
753
+ <td>SVG</td>
754
+ <td class="red"><span>No support</span></td>
755
+ <td class="red"><span>No support</span></td>
756
+ <td class="red"><span>No support</span></td>
757
+ <td>○</td>
758
+ <td class="red"><span>No support</span></td>
759
+ <td class="red"><span>No support</span></td>
760
+ <td class="red"><span>No support</span></td>
761
+ </tr>
762
+ <tr>
763
+ <td>EOT</td>
764
+ <td><span title="6.0">○</span></td>
765
+ <td><span title="6.0">○</span></td>
766
+ <td class="red"><span>No support</span></td>
767
+ <td class="red"><span>No support</span></td>
768
+ <td class="red"><span>No support</span></td>
769
+ <td class="red"><span>No support</span></td>
770
+ <td class="red"><span>No support</span></td>
771
+ </tr>
772
+ </table>
773
+ </div>
774
+
775
+ <!-- <div class="wf-woff ff">
776
+ <h3 class="fw">폰트 파일</h3>
777
+ <table class="fw">
778
+ <tbody>
779
+ <tr>
780
+ <th rowspan="5" class="ce fw">안동</th>
781
+ <th rowspan="5" class="ce fw">안동 까투리체</th>
782
+ <td rowspan="5" class="ce">
783
+ font-weight: normal
784
+ </td>
785
+ <td class="ce">woff</td>
786
+ <td class="ce bg">629KB</td>
787
+ <td>
788
+ https://cdn.jsdelivr.net/gh/webfontworld/andong/AndongKaturi.woff
789
+ </td>
790
+ </tr>
791
+ <tr>
792
+ <td class="ce">woff2</td>
793
+ <td class="ce bg">305KB</td>
794
+ <td>
795
+ https://cdn.jsdelivr.net/gh/webfontworld/andong/AndongKaturi.woff2
796
+ </td>
797
+ </tr>
798
+ <tr>
799
+ <td class="ce">eot</td>
800
+ <td class="ce bg">1.8MB</td>
801
+ <td>
802
+ https://cdn.jsdelivr.net/gh/webfontworld/andong/AndongKaturi.eot
803
+ </td>
804
+ </tr>
805
+ <tr>
806
+ <td class="ce">ttf</td>
807
+ <td class="ce bg">1.8MB</td>
808
+ <td>
809
+ https://cdn.jsdelivr.net/gh/webfontworld/andong/AndongKaturi.ttf
810
+ </td>
811
+ </tr>
812
+ <tr>
813
+ <td class="ce">otf</td>
814
+ <td class="ce bg">569KB</td>
815
+ <td>
816
+ https://cdn.jsdelivr.net/gh/webfontworld/andong/AndongKaturi.otf
817
+ </td>
818
+ </tr>
819
+ </tbody>
820
+ </table>
821
+ </div> -->
822
+ </div>
823
+ <!-- //webfontworld -->
824
+
825
+
826
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
827
+ <script>
828
+ var tabBtn = $(".css .menu li");
829
+ var tabCont = $(".css .cont div");
830
+ tabCont.hide().eq(0).show();
831
+ tabBtn.click(function(e) {
832
+ e.preventDefault();
833
+ var target = $(this);
834
+ var index = target.index();
835
+ tabBtn.removeClass("active");
836
+ target.addClass("active");
837
+ tabCont.css("display", "none");
838
+ tabCont.eq(index).css("display", "block");
839
+ });
840
+ $(".wf-size h3 span").click(function () {
841
+ var target = $(this);
842
+ $(".wf-size h3 span").removeClass("active");
843
+ target.addClass("active");
844
+ let weight = $(this).text();
845
+ $(".wf-size li").css("font-weight", weight);
846
+ });
847
+ $(".wf-layout h3 span").click(function () {
848
+ var target = $(this);
849
+ $(".wf-layout h3 span").removeClass("active");
850
+ target.addClass("active");
851
+ let weight = $(this).text();
852
+ $(".wf-layout .flex div ").css("font-weight", weight);
853
+ });
854
+ $(".wf-view h3 span").click(function () {
855
+ var target = $(this);
856
+ $(".wf-view h3 span").removeClass("active");
857
+ target.addClass("active");
858
+ let weight = $(this).text();
859
+ $(".wf-view .view strong, .wf-view .view em").css("font-weight", weight);
860
+ });
861
+ $(".style span").click(function(){
862
+ let bg1 = $(this).data("bg1");
863
+ let bg2 = $(this).data("bg2");
864
+ $(".view").css("background", bg1);
865
+ $(".view strong, .view em").css("color", bg2);
866
+ });
867
+ $("#wf-weight-input").on("change keyup state", function (e) {
868
+ $(".wf-weight-preview li").each(function(){
869
+ if ($("#wf-weight-input").val() === '') {
870
+ $(this).text("글씨를 입력하면 변경됩니다.");
871
+ } else {
872
+ $(this).text($("#wf-weight-input").val());
873
+ }
874
+ });
875
+ });
876
+ $("#wf-size-input").on("change keyup state", function (e) {
877
+ $(".wf-size-preview li").each(function () {
878
+ if ($("#wf-size-input").val() === '') {
879
+ $(this).text("글씨를 입력하면 변경됩니다.");
880
+ } else {
881
+ $(this).text($("#wf-size-input").val());
882
+ }
883
+ });
884
+ });
885
+ $("#wf-layout-input").on("change keyup state", function (e) {
886
+ $(".wf-layout .flex div").each(function () {
887
+ if ($("#wf-layout-input").val() === '') {
888
+ $(this).text("글씨를 입력하면 변경됩니다.");
889
+ } else {
890
+ $(this).text($("#wf-layout-input").val());
891
+ }
892
+ });
893
+ });
894
+ </script>
895
+ </body>
896
+ </html>