구글에서는 222개의 웹폰트를 라이브러리에 저장해 놓고 자유롭게 사용하도록 하고 있습니다. 폰트를 임베딩한 효과를 볼 수 있으며 사용법은 다음과 같습니다.
링크페이지로 가서 위 CSS 부분을 자신의 웹페이지 html코드의 head부분에 삽입합니다. 위에서는 body에 대해서 적용했는데 특정한 부분에 웹폰트를 적용하려면 CSS를 변경하면 됩니다. 예를 들어 content div의 h2 태그에 적용하고자 한다면
#content h2 { font-family: 'Tangerine', serif; font-size: 48px; }
serif는 오작동이 있을경우 기본 폰트를 사용하기 위함입니다. 위 코드를 적용하면 다음과 같이 나옵니다.
폰트에 CSS3의 그림자효과를 주려면 다음과 같이 합니다.
인라인 방식으로도 사용이 가능합니다.
폰트를 바꾸려면 폰트디렉터리에서 이름을 알아낸 뒤 이름만 바꿔주면 됩니다. Inconsolata 의 경우 다음과 같이 합니다.
Tangerine, Inconsolata, Droid Sans 와 같이 여러개의 폰트를 불러올 경우 다음과 같이 합니다. 너무 많이 쓰면 느려져서 안된답니다.
폰트의 종류별로 불러오자면 다음과 같이 합니다.
폰트 스타일을 적용하려면 다음과 같이 합니다.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>링크페이지로 가서 위 CSS 부분을 자신의 웹페이지 html코드의 head부분에 삽입합니다. 위에서는 body에 대해서 적용했는데 특정한 부분에 웹폰트를 적용하려면 CSS를 변경하면 됩니다. 예를 들어 content div의 h2 태그에 적용하고자 한다면
#content h2 { font-family: 'Tangerine', serif; font-size: 48px; }
serif는 오작동이 있을경우 기본 폰트를 사용하기 위함입니다. 위 코드를 적용하면 다음과 같이 나옵니다.
폰트에 CSS3의 그림자효과를 주려면 다음과 같이 합니다.
body {
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}인라인 방식으로도 사용이 가능합니다.
<div style="font-family: 'Font Name', serif;">Your text</div>
폰트를 바꾸려면 폰트디렉터리에서 이름을 알아낸 뒤 이름만 바꿔주면 됩니다. Inconsolata 의 경우 다음과 같이 합니다.
http://fonts.googleapis.com/css?family=Inconsolata
Tangerine, Inconsolata, Droid Sans 와 같이 여러개의 폰트를 불러올 경우 다음과 같이 합니다. 너무 많이 쓰면 느려져서 안된답니다.
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
폰트의 종류별로 불러오자면 다음과 같이 합니다.
http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
폰트 스타일을 적용하려면 다음과 같이 합니다.
http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
더보기
'부트스트랩.CSS.JS/CSS2.1' 카테고리 관련글
