윈도우에 기본으로 설치되어있는 폰트 이외에 각종 폰트들에 대한 정보들 및 CSS font-family 정의 방법에 대해서
알아보도록 하겠습니다.
중요한 점은 작업하시는 컴퓨터에 적용하려는 폰트가 설치되어 있어야 폰트 적용이 가능합니다.
폰트 목록 :  http://www.adobe.com/products/type/font-information.html
 
해당 목록들 중에서 Helvetica Neue Std 폰트 적용방법에 대해서 알아보도록 하겠습니다.
리스트에서 Helvetica Neue Std를 클릭해서 들어가시거나
http://www.adobe.com/type/browser/html/readmes/HelveticaNeueStdReadMe.html
경로를 통해 바로 들어가실수 있습니다.
Family information란을 보면 Menu Names And Style Linking 이라는 곳이 있습니다.
하단 부분에 3행으로 Menu Name, plus Style option, selects this font가 있는데
selects this font가 포토샵에서 Helvetica Nenu LT Std 폰트를 선택했을때 나오는 옵션값들에 대한 내용들이고(아래스샷)
snap1
Menu Name과 plus Style Option이 css에서 font-family및 font-style에 대해서 적용하는 내용입니다.
 
적용예시
포토샵 – Helvetica Neue LT Std 75 Bold, css –  font-family:HelveticaNeueLT Std; font-style:bold
포토샵 – Helvetica Neue LT Std 95 Black, css –  font-family:HelveticaNeueLT Std Blk; font-style:none
포토샵 – Helvetica Neue LT Std 107 Extra Black Condensed Oblique, css –  font-family:HelveticaNeueLT Std ExtBlk Cn; font-style:italic
포토샵 – Helvetica Neue LT Std 45 Light, css –  font-family:HelveticaNeueLT Std Lt; font-style:none
 
이와 같이 적용하시면 되며 Helvetica이외에 다른 폰트들 적용도 같은 방법으로 시도하시면 됩니다.
(일부 폰트는 정보만 있고 css 적용방법에 대해 언급되지 않은 폰트들도 있습니다.)

카테고리: Research

0개의 댓글

답글 남기기

아바타 플레이스홀더

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다