반응형
12. 웹폰트
웹폰트란?
웹폰트는 사용자가 가지고 있지않은 폰트를 웹페이지에서 사용할 수 있는 방법입니다. 폰트를 서버에서 다운로드하는 방식이라고 할 수 있습니다.
본 수업에서는 구글에서 제공하는 무료 웹폰트 서비스인 google fonts를 이용해서 웹폰트를 설명합니다.
구글 폰트 사이트에서 다음과 같이 선택하면 link주소와 font-family 적용법이
나옵니다.
web_font.html
<!DOCTYPE html>
<html>
<head>
<linkhref="https://fonts.googleapis.com/css?family=Indie+Flower|Londrina+Outline|Open+Sans+Condensed:300";rel="stylesheet">
<style>
#font1
font-family: 'Open Sans Condensed', sans-serif;
#font2
font-family: 'Indie Flower', cursive;
</style>
</head>
<body>
<pid="font1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis lacus eu ex rhoncus pretium. Sed vestibulum risus pharetra, consequat nibh ac, ornare nunc. Nunc eu dui eget lorem aliquet finibus.
</p>
<pid="font2">
Quisque nec arcu felis. Vestibulum gravida, augue eu facilisis tempus, neque erat tincidunt nunc, consequat ultrices felis urna eu augue. Nulla ut urna purus. Curabitur ultricies rutrum orci malesuada tempor.
</p>
</body>
</html>
web font generator를 이용해서 컴퓨터에 저장된 파일을 업로드 해서 웹폰트를 생성할 수 있습니다.
다운로드를 받으면 다음과 같은 파일들이 생성됩니다.
그리고 preview.html를 보면 다음과 같은 소스를 볼 수 있습니다.
아래와 같이 font-family 에 @font-face의 값과 동일하게 하면 만든 웹폰트를 사용할 수 있습니다.
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 18. 박스 모델 (0) | 2017.11.15 |
|---|---|
| 생활코딩 css 정리 - 14. 레이아웃 인라인 vs 블럭레벨 (0) | 2017.10.15 |
| 생활코딩 css 정리 - 13. bracket 도구사용법 (0) | 2017.10.14 |
| 생활코딩 css 정리 - 12. 캐스캐이딩 (0) | 2017.10.13 |
| 생활코딩 css 정리 - 10. 서체 (0) | 2017.10.03 |
| 생활코딩 css 정리 - 9. font (0) | 2017.10.03 |
| 생활코딩 css 정리 - 8. color 그리고 text-align (0) | 2017.09.30 |
| 생활코딩 css 정리 - 7. font-size (0) | 2017.09.26 |