08-1 원하는 글꼴, 웹 폰트 사용하기
CSS3의 웹 폰트는 사용하고 싶은 글꼴을 선언해 주고 해당 글꼴을 파일의 경로를 지정해 주면 자동으로 다운로드 받아 브라우저가 출력해 줍니다. 다시 말해 디자이너가 원하는 결과를 보장받을 수 있는 시대가 된 것이죠.
이러한 방법을 사용하려면 @font-face 속성을 이용해서 글꼴의 종류와 글꼴의 파일 경로를
설정해 줍니다.
@font-face {
font-family :글꼴이름;
src : url(‘글꼴파일URL경로’), url(‘글꼴파일URL 경로2’) ...;
}
font-family 에 신규 글꼴 이름을 지정하면 해당 이름이 등록됩니다. 나중에 해당 이름을 스타일에 적용하면 그 글꼴로 표시됩니다. src 에는 글꼴 파일의 경로 및 파일 이름을 지정합니다. 사용할 수 있는 글꼴의 종류와 지역별 현황은 다음과 같습니다.
|
글꼴 |
확장자 |
설명 |
|
|
TrueType |
ttf |
글꼴을 벡터 형식인 직선과 곡선을 이용해서 표시하는 형식입니다. 윈도우 환경의 표준 글꼴입니다. |
대부분의 브라우저지원함 (단, IE 지원 안함) |
|
OpenType |
otf |
TTF기술을 보유한 MS와 포스트 스크림트 기술을 보유한 어도브사가 제휴해서 PC와 Mac 서체 환경을 통합하기 위해 만든 형식입니다. TTF에 비해 용량이 적고 인쇄 매체에 적합한 특징이 있습니다. |
대부분의 브라우저 지원함(단, IE 지원안함) |
|
Embedded-Opentype |
eot |
MS에서 웹 페이지에 폰트를 포함시킬 목저긍로 CSS2에서 인터넷 익스플로러(이하 IE) 4.0 버전부터 시작한 형식입니다. 현재는 IE 브라우저만 지원되며 EOTFast 툴(http://www.eotfast.com/)을 이용해서 TTF를 EOT로 변환할 수 있습니다. |
IE 만 지웜 |
|
Scalabe-vector-graphic |
svg, svgz |
W3C에서 벡터 그래픽을 표현할 목적으로 틔 을 기반으로 해서 만든 오픈 형식입니다. 1999년부터 시작된 오래된 형식이지만 최근에 와서 브라우저들이 지원하기 시작했습니다. |
대부분의 브라우저 지원함(단, IE 는 버전 9 이상만 지원) |
|
지원 브라우저 |
정리하면 모바일용 사파리와 크롬 브라우저가 대상이라면 TTF, OTF 중에서 가능한 글꼴을 사용하면 됩니다. 반면에 데스크톱 PC 의 웹 브라우저도 지원해야 한다면 IE를 고려해야 하므로 eot 도 포함시켜 지원해야 합니다. 왜냐하면 IE 는 eot 파일만 지원하기 때문입니다.
글꼴이 현재 html 파일과 같은 폴더에 있다면 그냥 다음처럼 파일 이름만 적으면 됩니다.
@font-face {
/* 서울 남산체를 다운로드 받아 설정 */
font-family:SeoulNamsanFont;
src:url(‘SeoulNamsan.ttf’);
}
p { font-family: SeoulNamsanFont; /* 웹폰트 이름 사용 */ }
위 예는 같은 폴더에 들어 있는 ‘SeoulNamsanL.ttf’ 이라는 트루타입 글꼴을
‘SeoulNamsanFont’ 라는 이름으로 등록된 것입니다. 또한 태그 선택자를 이용하여 p 엘리먼트의 글꼴을 앞에서 등록한 서울 남산체인 SeoulNamsanFont 로 지정합니다.
웹 폰트를 사용할 때 특정 글자 효과에 맞는 글꼴만 따로 등록할 수도 있습니다. 예를 들어서 글자를 두껍게 할 때와 아닐 때를 구분해서 등록해야 할 때는 다음처럼 font-weight 속성르 함께 선언해 주면 됩니다.
@font-face
{
font-family : 글꼴이름 ;
src:url (‘다른글꼴파일URL경로’);
font-wight :속성값
}
-> 속성값 : normal(기본) , bold(진하게)
만약 별도로 font-weight에 속성값을 설정하지 않으면 normal(기본) 이 기본값으로 설정됩니다. 이경우는 처음에 등록한 글꼴이 화면에 표시됩니다. 하지만 bold(진하게)를 지정해 주면 그 용도에 맞는 다른 글꼴 파일을 등록시킬 수 있습니다. 다시 말해서 추가된 스타일 속성에 맞는 별도 용도의 글꼴 파일을 매핑해서 등록할 수 있습니다.
@font-face{
/* 서울남산체(Extra bold)를 다운로드 받아 설정 */
src : url(‘SeoulNamsanEB.ttf’);
font-weight:bold; /*bold 스타일은 이 폰트로 등록 */
}
서울남산체 -> 서울남산체
디자인 서울 사이트(http://design.seoul.go.kr)에서 [디자인 서울 소개 – 서울상징 –서울서체]에서 무료로 다운로받을 수 있습니다.
http://www.seoul.go.kr/v2012/seoul/symbol/font.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css" >
@font-face{
font-family: SeoulNamsanFont;
src:url('SeoulNamsanvert.ttf');
}
@font-face {
font-family: SeoulNamsanFont;
src:url('SeoulNamsanvert.ttf');
font-weight: bold;
}
@media screen and (max-width:799px){
body{
background-color: #ffffff;
color:#000000;
}
#a1 {
font-family:SeoulNamsanFont;
}
#a2{
font-family:SeoulNamsanFont;
}
}
@media screen and (min-width:800px){
body{
background-color: #000000;
color:#ffffff;
}
#a1 {
font-family:SeoulNamsanFont;
}
#a2{
font-family:SeoulNamsanFont;
}
}
</style>
</head>
<body>
<div >
<p id="a1">서울 남산 폰트 </p>
<p id="a2">서울 남산 폰트 B</p>
</div>
</body>
</html>
댓글 ( 4)
댓글 남기기