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
댓글