다양한 폰트정보 및 css 정의 방법

Posted by in Research

윈도우에 기본으로 설치되어있는 폰트 이외에 각종 폰트들에 대한 정보들 및 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 적용방법에 대해 언급되지 않은 폰트들도 있습니다.)