- web typography, web fonts
- 웹폰트
- CSS @font-face Rule
- CSS @font-face 규칙
- CSS 웹폰트 적용
1 웹폰트[ | ]
- 웹상에서 폰트를 표시하는 기술
- 웹서버상에 폰트 파일을 두어 웹디자이너가 의도한 폰트로 표시할 수 있게 하는 기술[1]
2 예시 1: 기초[ | ]
- woff 파일 1개만 연결한 경우
- 두꺼운 글씨체에서 흐릿하게 나올 수 있음
html
Copy
<style>
@font-face {
font-family: myFont;
src: url('//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff');
}
.ng { font-family: myFont; }
</style>
<p>(기본폰트) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
<p class='ng'>(나눔고딕) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
3 예시 2: bold도 지정[ | ]
- 두꺼운 글씨용 폰트도 지정해준 경우
html
Copy
<style>
@font-face {
font-family: myFont;
font-weight: 400;
src: url('//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff');
}
@font-face {
font-family: myFont;
font-weight: 800;
src: url('//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff');
}
.ng { font-family: myFont; }
</style>
<p>(기본폰트) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
<p class='ng'>(나눔고딕) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
4 예시 3: 구글 CSS 사용 ★[ | ]
- 구글 등 CDN을 통해 제공되는 웹폰트CSS는 대부분 두꺼운 글씨체 문제가 해결되어 있다.
- link 태그 또는 CSS @import를 통해 연결하자.
- link 태그로 연결한 경우
html
Copy
<link rel='stylesheet' href='//fonts.googleapis.com/earlyaccess/nanumgothic.css'>
<style>
.ng { font-family: "Nanum Gothic"; }
</style>
<p>(기본폰트) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
<p class='ng'>(나눔고딕) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
- CSS @import로 연결한 경우 ★
html
Copy
<style>
@import url('//fonts.googleapis.com/earlyaccess/nanumgothic.css');
.ng { font-family: "Nanum Gothic"; }
</style>
<p>(기본폰트) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
<p class='ng'>(나눔고딕) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
5 같이 보기[ | ]
- 나눔글꼴 웹폰트 종결자
- CSS font-family 속성
- 웹 오픈 폰트 포맷 (.woff) ★
- 임베디드 오픈타입 (.eot)
- 구글 폰트
- 코어 폰트
- CSS
- 폰트
6 무료 한글 웹폰트[ | ]
7 주석[ | ]
- ↑ 전통적으로 웹브라우저는 로컬(이용자의 컴퓨터)에 설치된 폰트로만 문자를 표시하였기에 폰트 설치 여부에 따라 웹디자인에 제약이 있었음 → 웹폰트가 가능해져 문제 해결
8 참고[ | ]
편집자 Jmnote Jmnote bot R4nGDWTDjP97Qikvu87gU
로그인하시면 댓글을 쓸 수 있습니다.
- 분류 댓글:
- CSS (1)
HTML에 CSS를 적용하는 방식 3가지 ― 천도현