css 폰트 사용법에 대하여 알아보기

css 폰트 사용법에 대하여 알아보기

네 안녕하세요, 이번 포스팅에서는 폰트를 사용하는 방법에 대하여 알아보도록 하겠습니다.

폰트는 우리가 사용하는 글꼴을 결정짓는 요소인 만큼,

글의 분위기나 독자가 느끼는 감정 등을 좌지우지하기 때문에 중요합니다.

그럼 지금부터 시작하도록 하겠습니다.

 

1. 폰트 사용하기 : Serif, Sans-Serif, Monospace

css에서 폰트는 우리가 평소에 컴퓨터에서 사용하는 여러 가지의 글씨체와 똑같습니다.

그리고 예전에는 <font>라는 태그를 써서 폰트를 입력했는데,

요즘에는 css에서 폰트 프로퍼티를 이용해서 폰트를 입력을 하게끔 만들었습니다.

오히려 미리 css 스타일 시트를 이용하여 선언을 하고 들어가니 좀 더 편해진 셈입니다.

그리고 css에서 폰트를 되게 다양하게 제공을 하기도 하고,

우리가 외부에서 다운받은 폰트를 입력도 할 수 있기 때문에 더 다양하게 쓸 수 있습니다.

그리고 우리가 폰트에 적용시킬 수 있는 기본적인 폰트 유형은 크게 3가지입니다.

• Serif : 삐침(글씨의 지부 부분과 밑동 부분 양 끝이 돌출이 되어있음
• Sans-Serif : 삐침이 없는 폰트 스타일
• Monospace : 글자 폭이 동일한 폰트 스타일

이렇게 씁니다.

그럼 이어서 이 폰트를 사용하는 방법에 대하여 알아보도록 하겠습니다.

 

1 - 1. 폰트 패밀리 : font-family

font-family 프로퍼티는 우리가 사용할 폰트의 이름을 지정하는 프로퍼티입니다.

그리고 간혹 특정 브라우저에서 지원이 되지 않는 폰트토 존재하는데,

그럴 때는 다른 폰트가 적용이 되도록 콤마(,)를 붙여서 여러 개의 폰트를 나열하여

나열된 순서대로 적용이 되도록 하면 됩니다.

예를 들어 이렇게 씁니다.

font-family : Arial, "Times New Roman", Serif;

이렇게 쓰게 되면 제일 처음에 Arial이라는 폰트가 적용이 1순위로 적용이 되는 것입니다.

그런데 이 폰트가 없다, 그러면 "Times New Roman"이라는 폰트가 적용이 됩니다.

그리고 이 마저도 브라우저에 없다,

그렇게 되면 Serif 스타일이 적용된 폰트들 중에 하나가 지정이 되어 화면에 출력이 됩니다.

이렇게 해서 혹시나 메인으로 쓸 폰트가 지정이 되지 않을 경우를 대비하여

여러 개의 폰트를 써서 하나의 비상 장치를 만들 수도 있습니다.

반응형

 

1 - 2. 폰트 크기 : font-size

font-size 프로퍼티는 말 그래도 폰트의 크기를 조절할 때 쓰는 프로퍼티입니다.

그리고 우리가 쓸 수 있는 사이즈 지정 수치는 크게 두 가지로, 절대 수치와 상대 수치로 나뉩니다.

절대 수치는 우리가 아까 봤던 css의 표준 단위들이 거기에 속하고,

우리가 굳이 절대 수치로 사이즈를 정할 필요가 없다면,

유동적으로 비율에 맞게 적용할 수 있는 상대 수치를 쓰면 됩니다.

상대 수치는 xx-small, x-small, medium, large, x-large, xx-large, smaller, larger 등으로 쓸 수 있고,

이들을 쓰는 방법도 하나의 값이기 때문에 우리가 css를 작성하는 양식과 똑같이 씁니다.

이렇게 쓰시면 됩니다.

font-size : 40px; // 폰트 크기 40픽셀
font-size : medium; // 폰트 크기 중간(브라우저마다 크기는 상이함)
font-size : 1.6em; // 현재 폰트의 1.6배 크기

 

1 - 3. 폰트 스타일 : font-style : normal | italic | oblique

font-style 프로퍼티는 폰트의 스타일을 어떻게 구성을 할 것인지 지정해 주는 프로퍼티입니다.

이는 사실 쓸 때도 있고, 쓰지 않을 때도 있습니다.

그렇지만 글을 강조할 때 글씨에 조금 변화를 주어서 쓰곤 합니다.

그리고 이 폰트 스타일은 3개의 스타일이 세트로 따라다닙니다.

• normal : 기본 스타일
• italic : 필기체, 손흘림 스타일
• oblique : italic과는 조금 다른 기울임 꼴 스타일(그렇지만 italic과 거의 비슷하게 출력이 됨)

이렇게 있습니다.

그래서 쓰실 때는 이렇게 쓰시면 됩니다.

font-style : italic; // 폰트 스타일 이텔릭 스타일

 

1 - 4. 폰트 굵기(font-weight)

font-weight 프로퍼티는 폰트의 굵기를 지정할 수 있도록 해주는 프로퍼티입니다.

그리고 그 범위는 100 ~ 900 사이의 숫자를 범위로 가집니다.

그리고 이 역시도 절대 수치와 상대 수치를 가지는데,

지금 말씀드린 숫자로 지정을 하는 것이 절대 수치이고,

상대 수치를 쓸 때는 normal(기본), bold(굵게), bolder(더 굵게), lighter(더 얇게)가 있으며,

전 세계적 기본 지정 수치로는 inherit(폰트 상속, 부모 폰트의 요소를 그대로 따르겠다),

initial(기본값 사용),

unset(부모로부터의 상속 값이 존재할 시에는 상속 값을, -

- 아닐 시에는 기본 값을 사용하며 정의되지 않은 값)이 있습니다.

font-size 프로퍼티는 이렇게 씁니다.

font-weight : 300; // 절대 수치, 300 정도의 굵기
font-weight : bold; // 폰트 굵기 굵게

 

여기까지 폰트를 사용하는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 이러한 폰트를 한 번에 지정하는 단축 프로퍼티에 대하여 알아보겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~