[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
<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-size 속성(px, pt, %, em 차이)
font-variant 속성(normal, small-caps)
font-weight 속성 (bold, 100~900, bolder, lighter)
'css' 카테고리의 다른 글
| @import rule 사용법, link 태그와 차이 (3) | 2014.05.16 |
|---|---|
| [html/css]외부 문서를 연결하는 link 태그 사용법 (1) | 2014.05.14 |
| [html/css]글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이) (2) | 2014.05.09 |
| [html/css] font-variant 속성(normal, small-caps) (0) | 2014.05.08 |
| [html/css] font-weight 속성 (bold, 100~900, bolder, lighter) (0) | 2014.05.07 |
댓글