admin
/
pick


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
							<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content - Type" content="text / html; charset = utf - 8" />
<title>WebFont Test</title>
<style>
p {margin : 7px;}

@font-face{
font-family:EOT_0;
src:url(EOT/NanumSquareNeoTTF-aLt.eot);
}
.EOT_0{font-family:EOT_0; font-size:12pt;}

@font-face{
font-family:EOT_1;
src:url(EOT/NanumSquareNeoTTF-bRg.eot);
}
.EOT_1{font-family:EOT_1; font-size:12pt;}

@font-face{
font-family:EOT_2;
src:url(EOT/NanumSquareNeoTTF-cBd.eot);
}
.EOT_2{font-family:EOT_2; font-size:12pt;}

@font-face{
font-family:EOT_3;
src:url(EOT/NanumSquareNeoTTF-dEb.eot);
}
.EOT_3{font-family:EOT_3; font-size:12pt;}

@font-face{
font-family:EOT_4;
src:url(EOT/NanumSquareNeoTTF-eHv.eot);
}
.EOT_4{font-family:EOT_4; font-size:12pt;}

@font-face{
font-family:EOT_5;
src:url(EOT/NanumSquareNeo-Variable.eot);
}
.EOT_5{
    font-family:EOT_5; 
    font-size:12pt;
    font-weight: var(--text-weight);
    font-variation-settings: "wght" var(--text-weight);
}

@font-face{
font-family:WOFF_0;
src:url(WOFF/NanumSquareNeoTTF-aLt.woff);
}
.WOFF_0{font-family:WOFF_0; font-size:12pt;}

@font-face{
font-family:WOFF_1;
src:url(WOFF/NanumSquareNeoTTF-bRg.woff);
}
.WOFF_1{font-family:WOFF_1; font-size:12pt;}

@font-face{
font-family:WOFF_2;
src:url(WOFF/NanumSquareNeoTTF-cBd.woff);
}
.WOFF_2{font-family:WOFF_2; font-size:12pt;}

@font-face{
font-family:WOFF_3;
src:url(WOFF/NanumSquareNeoTTF-dEb.woff);
}
.WOFF_3{font-family:WOFF_3; font-size:12pt;}

@font-face{
font-family:WOFF_4;
src:url(WOFF/NanumSquareNeoTTF-eHv.woff);
}
.WOFF_4{font-family:WOFF_4; font-size:12pt;}

@font-face{
font-family:WOFF_5;
src:url(WOFF/NanumSquareNeo-Variable.woff);
}
.WOFF_5{
    font-family:WOFF_5; 
    font-size:12pt;
    font-weight: var(--text-weight);
    font-variation-settings: "wght" var(--text-weight);
}

@font-face{
font-family:WOFF2_0;
src:url(WOFF2/NanumSquareNeoTTF-aLt.woff2);
}
.WOFF2_0{font-family:WOFF2_0; font-size:12pt;}

@font-face{
font-family:WOFF2_1;
src:url(WOFF2/NanumSquareNeoTTF-bRg.woff2);
}
.WOFF2_1{font-family:WOFF2_1; font-size:12pt;}

@font-face{
font-family:WOFF2_2;
src:url(WOFF2/NanumSquareNeoTTF-cBd.woff2);
}
.WOFF2_2{font-family:WOFF2_2; font-size:12pt;}

@font-face{
font-family:WOFF2_3;
src:url(WOFF2/NanumSquareNeoTTF-dEb.woff2);
}
.WOFF2_3{font-family:WOFF2_3; font-size:12pt;}

@font-face{
font-family:WOFF2_4;
src:url(WOFF2/NanumSquareNeoTTF-eHv.woff2);
}
.WOFF2_4{font-family:WOFF2_4; font-size:12pt;}

@font-face{
font-family:WOFF2_5;
src:url(WOFF2/NanumSquareNeo-Variable.woff2);

}
.WOFF2_5{
    font-family:WOFF2_5; 
    font-size:12pt;
    font-weight: var(--text-weight);
    font-variation-settings: "wght" var(--text-weight);
}

.slider{
  width: 40%;
}
</style>

</head>
<body class="container">
<table>
<tr><td>
<p class="EOT_0"> EOT_0 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="EOT_1"> EOT_1 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="EOT_2"> EOT_2 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="EOT_3"> EOT_3 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="EOT_4"> EOT_4 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF_0"> WOFF_0 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF_1"> WOFF_1 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF_2"> WOFF_2 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF_3"> WOFF_3 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF_4"> WOFF_4 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF2_0"> WOFF2_0 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF2_1"> WOFF2_1 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF2_2"> WOFF2_2 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF2_3"> WOFF2_3 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF2_4"> WOFF2_4 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<h3>Variable Font</h3>
<div class="slider-container">
  <div class="slider-controls">
    <label for="text-weight" class="slider-label">
      Weight: <span class="output" data-index="0"></span>   
    </label>
  </div>
  <input type="range" min="100" max="900" value="300" class="slider" id="text-weight"  name="text-weight" data-index="0">
</div>
</td></tr>

<tr><td>
<p class="EOT_5"> EOT_5 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF_5"> WOFF_5 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

<tr><td>
<p class="WOFF2_5"> WOFF2_5 12pt<br>
숫자 1234567980 영문 QWERTYUIOPASDFGHJKLZXCVBNM qwertyuioopasdfghjklzxcvbnm<br>
다람쥐 헌 쳇바퀴에 타고파!! The Quick Brown Fox Jumps Over The Lazy Dog ..<br>
</p>
</td></tr>

</table>

<script>
const container = document.querySelector(".container");
const sliders = document.querySelectorAll(".slider");
const sliderValues = document.querySelectorAll(".output");
sliders.forEach(slider => {
    const sliderIndex = slider.getAttribute("data-index");
    const output = document.querySelector(`.output[data-index="${sliderIndex}"]`);
    slider.oninput = function() {
      container.style.setProperty(`--${this.id}`, this.value);
      output.innerHTML = this.value;
    };
});
</script>
</body>
</html>