<div id="readability-page-1" class="page"><div><blockquote>
코딩애플의 '<a href="https://codingapple.com/unit/html-18-webfont/?id=141">HTML CSS 웹폰트 넣는 법과 안티앨리어싱</a>' 강의 내용을 정리한 글입니다.
</blockquote>
<h2 id="웹폰트">웹폰트</h2>
웹 폰트는 다음과 같이 CSS를 작성하여 적용합니다.
<pre><code>/* gulim 우선 적용, 문제 발생시 dotum 적용 */
body{
	font-family:'gulim', 'dotum','arial';
}</code></pre>
웹 폰트 적용 시 주의할 점은 font-family에 지정한 폰트가 시스템에 미리 설치되어 있어야 하며, 페이지 방문자들의 PC에도 설치되어 있어야 이용 가능합니다.
<h2 id="커스텀-폰트-넣는-법">커스텀 폰트 넣는 법</h2>
준비한 폰트파일을 CSS에서 사용가능하게 등록하는 과정입니다. 
+ @font-face는 여러개 등록 가능하지만, 한글폰트의 경우 사이즈가 너무 크기 때문에 1~2개만 사용하는 것을 추천합니다. 
+ 용량을 줄이기 위해서는 .woff파일(웹폰트용)을 사용합니다.
<pre><code>@font-face{
	font-family:'이쁜폰트';
 src:url(../font/NanumSqureR.ttf);
}</code></pre>
위 url부분에 .ttf등 폰트파일의 경로를 작성해줍니다.
<pre><code>/* 작명한 폰트의 이름을 작성하여 적용 */
body{
	font-family:'이쁜폰트';
}</code></pre>
<h2 id="웹폰트-다운로드">웹폰트 다운로드</h2>
<a href="https://fonts.google.com/">Google Fonts</a>에서 다운로드
<ul>
<li>방문자들이 구글폰트에서 다운받게 되므로 시간 단축 가능</li>
<li>link태그나 @import를 사용해서 적용</li>
</ul>
<h2 id="anti-aliasing">Anti-aliasing</h2>
확대를 했을 때 깨지는 폰트를 부드럽게 처리하기 위한 방법 👉 회전
<pre><code>/* 사용할 태그들을 약간 회전 */
p,h4,h3,h2,h1,span{
	transform: rotate(0.03deg);
}</code></pre>
맥북은 원래 부드럽게 처리해주지만, 윈도우는 큰 효과를 볼 수 있습니다.</div></div>

eunjeong.log

코딩애플의 'HTML CSS 웹폰트 넣는 법과 안티앨리어싱' 강의 내용을 정리한 글입니다.
웹폰트
웹 폰트는 다음과 같이 CSS를 작성하여 적용합니다.
/* gulim 우선 적용, 문제 발생시 dotum 적용 */
body{
    font-family:'gulim', 'dotum','arial';
}
웹 폰트 적용 시 주의할 점은 font-family에 지정한 폰트가 시스템에 미리 설치되어 있어야 하며, 페이지 방문자들의 PC에도 설치되어 있어야 이용 가능합니다.
커스텀 폰트 넣는 법
준비한 폰트파일을 CSS에서 사용가능하게 등록하는 과정입니다.
+ @font-face는 여러개 등록 가능하지만, 한글폰트의 경우 사이즈가 너무 크기 때문에 1~2개만 사용하는 것을 추천합니다.
+ 용량을 줄이기 위해서는 .woff파일(웹폰트용)을 사용합니다.
@font-face{
    font-family:'이쁜폰트';
    src:url(../font/NanumSqureR.ttf);
}
위 url부분에 .ttf등 폰트파일의 경로를 작성해줍니다.
/* 작명한 폰트의 이름을 작성하여 적용 */
body{
    font-family:'이쁜폰트';
}
웹폰트 다운로드
Google Fonts에서 다운로드
방문자들이 구글폰트에서 다운받게 되므로 시간 단축 가능
link태그나 @import를 사용해서 적용
Anti-aliasing
확대를 했을 때 깨지는 폰트를 부드럽게 처리하기 위한 방법 👉 회전
/* 사용할 태그들을 약간 회전 */
p,h4,h3,h2,h1,span{
    transform: rotate(0.03deg);
}
맥북은 원래 부드럽게 처리해주지만, 윈도우는 큰 효과를 볼 수 있습니다.

[TIL] 웹폰트 넣는 법

댓글