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

웹안전폰트

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

Generic Family	Family Name		Example
Generic Family	Windows Font Name	Mac Font Name	Example
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, 안전서체, 安全書体, 安全字体
Monospace ^{Fixed-width 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

저작자표시