본문 바로가기

HTML / CSS / Java Script

CSS로 다양한 글씨(font-family) 표현하기

css font family


스타일시트 폰트사용법

스타일을 사용하면 특정 태그에 글꼴, 모양, 굵기, 크기 등을 지정할수있어요.
각 속성별로 의미하는 내용, 지정하는 값의 형태가 다르니 정확하게 사용해야 됩니다.



특정태그에 font-family 속성을 이용하면 글꼴을 지정할수 잇다.
그러나 웹사잍트에 방문한 방문자의 컴퓨터에 해당글꼴이 없다면 글꼴은 나타나지 않습니다.
그러니 글꼴을 지정할때에는 여러개의 글꼴을 함께 지정하는 것이 좋다.
그러면 방문자의 PC에 처음 지정한 글꼴이없으면 두번째 없으면 세번째로 대체됩니다.
어러개 지정하더라도 없다면 기본 글꼴이 그대로 적용됩니다.


<STYLE>
<!-- 
  태그 {font-family:글꼴이름1, 글꼴이름2, ...}
-->
</STYLE>


font-style는 일반 형태로 할것인지 이태릴체 형태로 할지 지정함
font-style 속성 값의 종류에는 normal, italic, oblique가 있습니다.


<STYLE>
<!-- 
  태그 {font-style : normal 또는 italic, ....}
-->
</STYLE>


font-weight는 글자의 굵기를 지정합니다.
normal 일반, bold 굵게 나타납니다.
속성값의 종류는 normal, bold, lighter이 있고 100~900까지의 정수 형태 100단위 9단계 조절로 직접 지정할수도 있다.(숫자가 크면 굵어짐)


<STYLE>
<!-- 
  Selector {font-weight:normal 또는 bold 또는, 100~900}
-->
</STYLE>


font-size는 글자 크기를 지정합니다.
스타일시트에서 제공하는 단위를 사용하여 글자 크기를 다양하게 조절할수있고 자주사용하는단위는 px, pt임


<STYLE>
<!-- 
  Selector {절대값 or 상대값}
-->
</STYLE>


Selector {font: font-style 속성값; font-weight 속성값; font-size 속성값/line-height(줄간격) 속성값; font-family 속성값;}