CSS 글꼴 설정

font-family

css의 속성 중 하나

글꼴을 결정한다.

아무리 화려한 글꼴을 쓰더라도 웹사이트 제작자에게만 글꼴 파일이 있고

읽는 사람의 컴퓨터에는 없다면 글이 깨져서 보이게 된다.

그렇기 때문에 보통 웹사이트를 만들 때 비교적 '안전한' 글꼴 사용을 추천한다.

안전한 글꼴은 기본적으로 컴퓨터에 깔려서 오는 폰트 등을 포함한다.

안전한 글꼴(영어) 예시

Arial

Helvetica

Times New Roman

Times

Courier New

Courier

Verdana

Georgia

Palatino

Garamond

한글 예시:

굴림

굴림체

궁서

궁서체

돋움

돋움체

바탕

바탕체

휴면엽서체

이러한 폰트를 적용하는 방법은 다른 속성과 동일하다

font-family: Times;

만약 이름이 여러개의 단어라면 ""안에 묶어준다.

font-family: "Times New Roman";

여러개의 글꼴을 적어준다면, 첫번째 글꼴이 읽는사람의 컴퓨터에 없을 경우 다음 폰트를 자동으로 찾게 된다.

굳이 화려한 글꼴을 써야겠다면 이 방법으로 비상용 글꼴을 만들어주면 된다.

font-family: arial, helvetica, sans-serif;

font-size

글꼴의 크기를 정하는 속성

이 속성을 이용해서 문단이나 바디의 글씨 크기를 <h1> 이나 <h2> 보다 크게 만드는게 가능하다..

하지만 제목을 쓰는거라면 굳이 그러지 말고 그냥 <h1> <h2> 쓰자

font-weight

글씨의 굵기를 정하는 속성

색깔과 비슷하게 단어로 굵기를 지정할 수 있고(bold, normal, bolder, lighter)

숫자로도 지정할 수 있다.

100, 200, 300, 400(normal), 500, 600, 700(bold), 800, 900

font-weight: bold;

font-weight: 700;

위 두줄은 똑같은 내용이다

font-style

글씨체의 모양(글꼴 아님!!) 을 정하는 속성

normal 기본값

italic 아이탈릭 글꼴에 옆으로 기운 글씨

oblique 옆으로 기운 글씨

font-style: italic;

text-decoration

글 위, 아래, 또는 가운데에 줄을 그어준다.

위에 줄: text-decoration: overline;

아래 줄: text-decoration: underlineline;

중간 줄: text-decoration: line-through;

없음: text-decoration: none;

text-transform

영어에만 해당되는 속성. 대문자 소문자 여부를 바꿔준다

capitalize : 모든 단어의 첫 글씨를 대문자로 바꾼다

uppercase : 모든 글씨를 대문자로 바꾼다

lowercase : 모든 글씨를 소문자로 바꾼다

none : 아무변형 없음