본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _
html+css

font 속성

by 오늘의갈비찜 2021. 4. 24.
728x90

CSS에는 두 가지의 글꼴 집합(font family)이 존재합니다.

 

- generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등)

- font family : 특정 글꼴 집합 ("Times", "Courier" 등)

 

font 모든 font 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
font-family 텍스트의 글꼴 집합(font family)을 설정함.

ex) .serif { font-family: "Times New Roman", Times, serif; }
font-style 주로 이탤릭체를 사용하기 위해 사용함.
normal : 텍스트에 어떠한 스타일도 적용하지 않음.
italic : 텍스트를 이탤릭체로 나타냄.
oblique : 텍스트를 기울기.
            이 속성값은 italic과 매우 유사.
            지원하는 웹 브라우저가 거의 없음.

ex) .normal { font-style: normal; }
font-variant

텍스트에 포함된 영문자 중 소문자만을 작은 대문자(small-caps) 글꼴로 변경시킴.

 small-caps: 영문자 중 모든 소문자를 작은 대문자로변경.

               이때 영문자 중 대문자는 기존 크기 그대로 출력.

작은 대문자(small-caps) 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미
  normal : 기본 스타일적용.

ex)  .smallCaps { font-variant: small-caps; }

font-weight 텍스트를 얼마나 두껍게 표현할지를 설정함.
1. lighter
2. normal
3. bold
4. bolder 
5. 100, 200, 300, ... , 900 등과 같이 숫자로 설정할 수 있음

ex)    .bold { font-weight: 600; }
font-size 텍스트의 크기를 설정함.
1. 백분율 단위(%): 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정.
2. 배수 단위(em): 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정.
3. 픽셀 단위(px): 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정.

ex)  body { font-size: 100%; }
     #large { font-size: 2.5em; }
     #fixed { font-size: 20px; }

출처: 

tcpschool.com/css/css_basic_fonts

728x90

'html+css' 카테고리의 다른 글

list-style 속성  (0) 2021.04.24
link 속성  (0) 2021.04.24
text 속성  (0) 2021.04.24
background 속성  (0) 2021.04.24