[html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이)

 

 

[html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이)

 

css에서는 원하는 글꼴을 지정할 때 font-family 속성을 사용합니다.

 

사용 예:

 

p{

font-family; arial, 바탕체, "Times New Roman", Serif;

}

 

 

 font-family 속성

 

 

font-family은 우리말로 번역하자면 글꼴 집합인데, 여러 개의 글꼴을 모아놓은 것이라고 보시면 됩니다.

 

만일 글꼴을 하나만 지정하면, 사용자의 컴퓨터에 그 글꼴이 없을 때는 기본값으로 표시가 됩니다.

 

 

font-family은  다시 family-name과  generic family로 나누어집니다

 

 

family-name : 글꼴 이름  arial, verdana,나눔고딕, 궁서, 굴림 등

 

generic family : 모양이 비슷한 글꼴들의 그룹 Serif(바탕체), Sans-serif(고딕체), Cursive(필기체) 등

 

 

 

▶font-family 속성 사용법:

 

1) 하나 이상의 글꼴을 열거할 때 쉼표를 씁니다.

 

2) 글꼴 이름에 공란이 들어갈 경우 인용 부호(" " 나 ' ')를 답니다.

 

예:

 

p{font-family; arial, 바탕체, "Times New Roman", Serif;}

 

인라인으로 스타일을 작성할 경우 style ="    " 형식이기 때문에 안쪽은 홑따옴표를 써 줌 ( ' ' )

 

<p style="font-family; arial, 바탕체, 'Times New Roman', Serif;">

 

3) 시작은 family-name으로,  마지막은 항상 generic family로 설정합니다.

 

   사용자가 해당 글꼴이 없을 경우, 비슷한 글꼴체로 표시하기 위함임.

 

 

그럼 어떤 글꼴을 사용해야 대부분의 부라우저에서 원하는 글꼴을 표시할 수 있을까요?

 

 

▶Safe Web Font(안전한 웹 글꼴)

 

다음 사이트를 참조했습니다 http://webdesign.about.com/od/fonts/qt/web-safe-fonts.htm

 

 

Serif : 바탕체 계열

 
Courier
Courier New
Georgia
Times
Times New Roman


Sans-Serif  : 고딕체 계열

 

Arial
Arial Black
Tahoma
Trebuchet MS
Verdana

 

Monospace : 가로 폭이 동일한 글꼴


Courier

Courier New

 

cursive : 필기체 계열


Comic Sans(Windows와 Macintosh에서만 지원하며 Linux에서는 지원되지 않음)

 

 

스마트폰과 모바일 장치

 

안드로이드에서 쓰는 공통 글꼴은 없어서,

 

대신 @font-face 태그를 사용해 원하는 글꼴을 import 해

서 쓰셔야 합니다.

 


iPhone, iPod, iPad에서 쓰는 공통 글꼴:

 

Arial
Courier
Courier New
Georgia
Helvetica
Palatino
Times New Roman
Trebuchet MS
Verdana

 

 

▶ Web Fonts

 

위에서는 font-family에서 지정한 글꼴이 사용자의 컴퓨터에 설치되어 있지 않을 경우

 

기본값으로 표시된다고 했는데요

 

웹 폰트를 사용하면, 사용자의 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있습니다.

 

원하는 폰트가 있는 곳으로 연결하여, 외부 스타일을 불러와서 쓰는 방법입니다.

 

 

사용 법:

 

<head> </head> 사이 <style type="text/css"> 위에<link>태그로 폰트가 있는 주소 연결시킴

 

<link>태그는 외부 스타일시트를 연결시키는 태그임.

 

또는

 

<head> </head> 사이 <style type="text/css"> 바로 다음 줄에 @import로 폰트가 있는 주소 연결 

 

 

 

구글에서 제공하는 무료 폰트 : https://www.google.com/fonts 

 

사용 예:

 

아래에서 빨간색 부분이 글꼴이 있는 주소를 넣는 곳

<head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>

<style type="text/css">

h1 {font-family: 'Open Sans', sans-serif;}

</style>

</head>

 

 

또는

 

<style type="text/css">

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

h1 {font-family: 'Open Sans', sans-serif;}
</style>

 

 

실제 html/css 작성해 사용해 보겠습니다 font family.htm

 

 <!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css'>
<style type="text/css">
h1, p {font-family: "Love Ya Like A Sister", cursive;}
</style>
</head>

 


<body>

 

<h1>Typeface </h1>

<p>In typography, a typeface (also known as font family) is a set of one or more fonts each
composed of glyphs that share common design features. Each font of a typeface has
a specific weight, style, condensation, width, slant, italicization, ornamentation, and designer or foundry (and formerly size, in metal fonts). </br>
 http://en.wikipedia.org/
</p>


</body>
</html> 

 

실행 화면입니다

 

제 브라우저에는 없었던 Love Ya Like A Sister 글꼴로 표시가 되었습니다. ^^

 

 

 

글꼴을 지정하는 font 속성 배우기

 

글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)

 

font-variant 속성(normal, small-caps)

 

font-weight 속성 (bold, 100~900, bolder, lighter)

 

font-style 속성 (normal, italic, oblique 차이) 

신고
지구별에
css 2014.05.10 01:00
Powerd by Tistory, designed by criuce