CSS 폰트 : 웹안전 폰트와 다운

CSS 2012.02.21 14:56

CSS 폰트 : 웹안전 폰트와 다운

웹안전폰트

폰트는 사용자가 컴퓨터에 있어야 사용가능하다. 옛날에는 단지화려하게 꾸미기위해서 별 폰트들을 남발했지만 요즘은 사라진지오래다. 일단 웹안전 폰트부터 살펴보자.

Generic Family Family Name Example
Windows Font Name Mac Font Name
Sans-serif Normal fonts without serifs Arial Arial Safe Fonts, 안전서체, 安全書体, 安全字体
Arial Black Arial Black Safe Fonts, 안전서체, 安全書体, 安全字体
Lucida Sans Unicode Lucida Grande Safe Fonts, 안전서체, 安全書体, 安全字体
Tahoma Geneva Safe Fonts, 안전서체, 安全書体, 安全字体
Trebuchet MS Helvetica Safe Fonts, 안전서체, 安全書体, 安全字体
Verdana Verdana Safe Fonts, 안전서체, 安全書体, 安全字体
MS Sans Serif Geneva Safe Fonts, 안전서체, 安全書体, 安全字体
Serif Normal fonts with serifs Georgia Georgia Safe Fonts, 안전서체, 安全書体, 安全字体
Palatino Linotype Book Antiqua Safe Fonts, 안전서체, 安全書体, 安全字体
Times New Roman Times Safe Fonts, 안전서체, 安全書体, 安全字体
MS Serif New York Safe Fonts, 안전서체, 安全書体, 安全字体
Monospace Fixed-width fonts Courier New Courier New Safe Fonts, 안전서체, 安全書体, 安全字体
Lucida Console Monaco Safe Fonts, 안전서체, 安全書体, 安全字体
Cursive Fonts that emulate handwriting Comic Sans MS Comic Sans MS Safe Fonts, 안전서체, 安全書体, 安全字体
Fantasy Decorative fonts, for titles, etc. Impact Impact Safe Fonts, 안전서체, 安全書体, 安全字体

위폰트는 기본적으로 탑재되어있는것들이다.

그리고 Windows 버전별로 어떤 서체가 모든 국가별 버전에 기본 탑재되어 있는지 좀더 확인하려면 Microsoft의 Typography 웹 사이트에 있는 Fonts and products 페이지를 참고하면 된다.


다운로드가능한 폰트

그래도 원하는 폰트를 꼭 사용하고 싶게하면 어떻게 해야 할까? 
css에서 @font-face 로 설정할 수 있다.(SIFR방법도 있지만....이 방법은 폰트자체를 건드린다는 개념과 다르니 따로 포스팅하겠다.)

일단 웹에서 다운로드가능한 폰트의 확장자는TTF,OTF,EOT,SVG,WOFF이다. (자신에게 어떤폰트가 있는지 알아보려면  C:\Windows\Fonts 에서 확인해보자.) 사용방법은 아래와 같다.

자신이 원하는 폰트파일을가지고 이 사이트로 가자 @font-face Generator


1. add fonts를 클릭하고 원하는폰트파일을 불러온다.
2. 옵션중선택하고 agreement에 체크 그러면 오른쪽 아래에 다운로드박스가 나오는데 클릭하면 다운받을 수 있다.
3. 이때 샘플로 예제 웹문서까지 첨부되니 참고

위에 이걸 잘알면 사용해도 관계없고 이번엔 사용하는 CSS코드를 살펴보자.

@font-face {
	font-family: 'sketch'; /*폰트이름을 지정*/
	src: url('font/hnaksec-webfont.eot');
	src: local('☺'), url('font/hnaksec-webfont.woff') format('woff'), 
	url('font/hnaksec-webfont.ttf') format('truetype'), 
	url('font/hnaksec-webfont.svg#CRegular') format('svg');
}

body{font-family: 'sketch';}

주의 할 점은 로컬폰트를 사용할 수 있게 src: local('폰트이름'), local('postscript이름')에 맞춰 지정하게 되어있지만 맥(mac)에서 한글같은 2바이트 폰트이름의 문제때문에 ☺같은 특수문자로 대체한다.

참고로 svg폰트의 #CRegular부분은 svg폰트로 변환시에 지정되는 id이다. 이에대한 정보는 svg폰트를 메모장으로 열고 id를 검색해보면 알수 있다.

이정도 알면 사용하는데 문제는 없다. 

위의 예제는 여기서 확인가능하다 http://sianasiatiger.cafe24.com/study/load-font.html

또 더 자세히 깊게 파고 들고 싶다면 여기를 참조 http://circlash.tistory.com/578



저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바