[TIL] CSS - Font Style

Simple Key·2020년 3월 23일
0

1. font family

font family는 폰트 스타일을 지정하는 태그다.

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용한다는 뜻.
만약 Georgia 폰트가 지원되지 않으면, "Times New Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용한다.

"Times New Roman"처럼 띄어쓰기가 되어있는 폰트 이름은 ""(쌍따옴표)를 사용해야한다.

font-family 값에는 보통 여러가지 폰트를 나열한다. 사용자가 어떤 브라우저를 사용할지 모르기 때문이다.
가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트!

2. font size

.main {
  font-size: 50px;
}

main 라는 클래스에 50px(픽셀)의 폰트크기를 한다.
폰트 크기 단위는 'px', 'em', 'pt'등 여러가지 있다.

html h1~h5 태그는 heading(제목)을 주로 작성하는 태그다. 1에서 5로 숫자가 커질수록 글씨크기가 점점 작아진다. 하지만 css에서 폰트크기를 바꿀 수 있다.

h1 {
  font-size: 30px;
}
h4 {
  font-size: 50px;
}

h1 태그에는 30px이고, h4태그에는 50px가 적용 되었기에, h4태그의 글씨가 더 커지게 된다.

3. font weight

.bold-font {
  font-weight: bold;
}

font-weight 는 글씨 두께를 조절하는 속성(property) 이다.
font-weight는 normal, bold, 100, 200, ... 900 등의 값이 지정될 수 있다.
숫자 400은 normal과 같다.
숫자 700은 bold와 같다.
이렇게 숫자로 두께를 세밀하게 조정해도 되지만, 보통은 두껍거나 or 아니거나 두가지 경우면 되므로 간편하게 bold 값을 지정한다.

4. font style

a {
  font-style: italic;
}

font-style이라는 property로 쉽게 글씨 스타일을 바꿀 수 있다.
italic이라는 값을 지정하면 이탤릭체로 변한다.

5. font color

.pink {
  color: pink;
}
.yellow {
  color: yellow;
}

pink, yellow처럼 텍스트로 누구나 알아보기 쉬운 색깔을 지정할 수 있다.

하지만 진한핑크, 연한핑크, 초록색같은 노란색.. 등 더 세밀한 조정을 하기위해서 여러가지가 방법을 사용할 수 있다.

hex 색상코드: 여섯자리로 표현 - #eb4639
rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%) 등 방법이 있다.

profile
프론트엔드 개발자 심기현 입니다.

0개의 댓글