Google Web Fonts [구글 웹폰트]
Google Web Fonts [구글 웹폰트]
1996년 : CSS 1.0
1998년 : CSS 2.0 - 제작자의 외부 스타일시티에 폰트 적용을 위한 @font-face 포함
1998년 : CSS 2.1 - 저작권 등의 문제로 @font-face를 CSS에서 제거
2002년 : CSS 3 - @font-face를 새로운 폰트 모듈로써 다시 포함.
☞ 구글 폰트 사이트 : https://fonts.google.com/ (Internet explorer를 제외한 Chrome, Edge, Firefox, Safari로 접속)
01. ex) 폰트명의 우측의 + 버튼(1)을 클릭합니다. 그러면 화면 하단에 (2)가 나타나는데 클릭.
02. (3) 클릭하면 폰트를 다운로드 할 수 있습니다.
(4) 임베드 방식, 커스터마이징 선택
(5) 적용방식 선택
standard : <link href="https://fonts.googleapis.com/css?family=Jua|Nanum+Gothic" rel="stylesheet">
@import :
<style>
@import url('https://fonts.googleapis.com/css?family=Jua|Nanum+Gothic');
</style>
(6) 스타일시트(CSS) 폰트 사용법 : font-family: 'Jua', sans-serif;
03. 적용결과 소스예시 ;
'Web Design > web design general' 카테고리의 다른 글
| Code Editors - 코딩을 위한 멋진 에디터 프로그램 (2) | 2018.04.18 |
|---|---|
| 웹폰트 (web font) 사용하기 (1) - CDN (0) | 2018.04.16 |
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
웹폰트 (web font) 사용하기 (1) - CDN
웹폰트 (web font) 사용하기 (1) - CDN 사용
눈누 상업용 무료 한글폰트
http://noonnu.cc/
01. 사용하고자 하는 폰트를 클릭합니다.
02. A부분의 웹폰트로 사용하기를 복사해 style.css 또는 웹페이지의 <style></style> 안에 붙여넣기를 합니다.
03. 적용하고자 하는 태그에 다음과 같이 삽입합니다.
ex) p { font-family : 'Godo' font-size : 15px; }
고도체 웹폰트 예시보기 [GO]
'Web Design > web design general' 카테고리의 다른 글
| Google Web Fonts [구글 웹폰트] (2) | 2018.04.18 |
|---|---|
| Code Editors - 코딩을 위한 멋진 에디터 프로그램 (2) | 2018.04.18 |
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
CSS Property (속성 ) : Font
CSS Property (속성 ) : Font
☞ 4가지 선택자
*{ 스타일 속성: 속성값; } ex) * { color: blue; } ※ * = all
태그명{ 스타일 속성: 속성값; } ex) body { color: black; }
.클래스명{ 스타일 속성: 속성값;} ex) .wooin21 { color: pink; }
#아이디{ 스타일 속성: 속성값;} ex) #wooin21 { color: orange; }
CSS 기본문법 : p { 속성: 속성 값 } ex) p { font-family : 'Nanum Gothic', tahoma, verdana; } /* 주석 */
Font 관련 Property (속성 ) :
font-family, font-style, font-variant, font-size, font-weight, font-stretch
[ example ]
01. font-family
p {
font-family: "Times New Roman", Times, serif;
}
02. font-style
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
03. font-size
p {
font-size: 14px;
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
04. font-weight
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
05. font-variant
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
05. font-variant
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
※ Responsive Font Size
vw = "viewport width"
ex) <h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
☞ CSS 관련 유용한 사이트 : https://www.w3schools.com/
'Web Design > CSS & CSS3' 카테고리의 다른 글
| Google Prettify - 티스토리에 소스코드 표시 (0) | 2018.04.25 |
|---|---|
| SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시 (0) | 2018.04.24 |
| CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를... (0) | 2018.04.16 |
| CSS - Embedding Styles (HTML에 CSS 적용 방법) (0) | 2018.04.16 |
| CSS Vendor Prefixes = CSS browser prefixes (브라우저 접두사) (0) | 2018.04.14 |
SVG 관련 유용한 사이트
SVG 관련 유용한 사이트 :: SVG 아이콘 or 폰트를 다운로드 또는 링크로 사용가능한 사이트
'Web Design > web design general' 카테고리의 다른 글
| 웹폰트 (web font) 사용하기 (1) - CDN (0) | 2018.04.16 |
|---|---|
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
| 반응형 웹디자인 (Responsive web design )을 위한 Grid system (0) | 2015.06.24 |
| SVG (Scalable Vector Graphics) (0) | 2015.06.24 |
