고정 헤더 영역
상세 컨텐츠
본문
반응형
웹 폰트 (생활코딩)
사용자가 혹시 폰트가 없으면, 글자가 깨짐.
웹 페이지에서 폰트를 사용할 수 있는 방법. (폰트를 서버에서 다운받는 방식)
구글에서 제공하는 웹 사이트 (https://fonts.google.com/?authuser=1)
무료!
내가 직접 웹 폰트를 만들고자 할 때, web font generator를 사용해서 다운로드 받은 후
에디터에 입력을 하면된다.
<!DOCTYPE html>
<html>
<head>
<link href="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>
<p id="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>
<p id="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>
반응형
'코딩' 카테고리의 다른 글
| 조화 : Stylish (0) | 2017.02.19 |
|---|---|
| 조화 : 상속 (0) | 2017.02.19 |
| 타이포그래피 font, 서체 (0) | 2017.02.17 |
| 타이포그래피 텍스트를 정렬하는 법 (text-align) (0) | 2017.02.17 |
| 타이포그래피 color (0) | 2017.02.17 |
