웹폰트 사용법
//=============================
* 웹 폰트 형식(포멧 종류)과 브라우저 지원
https://www.w3schools.com/css/css3_fonts.asp
- 모든 브라우저가 지원하는 포맷은 TTF/OTF, WOFF
WOFF(Web Open Font Format) <====
OTF/TTF 를 이용한 구조의 압축된 버전으로, 다른 글꼴 형식보다 빠르게 로드
- 모든 브라우저가 지원
SVG/SVGZ (Scalable Vector Graphics (Font)
*SVGZ는 SVG의 압축된 버전
EOT(Embedded Open Type)
- IE 6 이하만 지원
OTF(OpenType Font) / TTF(TrueType Font)
//================================
구글 웹폰트 사용
https://fonts.google.com/?subset=korean
- 사이트에서 폰트 선택해서 링크 생성
예) 나눔 고딕의 경우
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">
.fon-nago{
font-family: 'Nanum Gothic', sans-serif;
}
<p class="fon-nago"> test </p>
//================================
font-family: arial, 나눔고딕, 맑은고딕;
- 처음 부터 검색해서 먼저 나오는 로컬 폰트를 사용
- 영문 전용 폰트가 먼저 나오면 영문은 영문 전용 폰트로 표시 됨
//=============
@font-face
온라인 폰트 불러오기
@font-face {
font-family: "loc-fon";
src: local(나눔고딕),local(맑은고딕);
font-weight: normal;
unicode-range: U+0-10FFFF;
}
//================================
// 참고
폰트
https://wit.nts-corp.com/2017/02/13/4258
'Code > Web' 카테고리의 다른 글
[CSS] display (block, flex, grid) (0) | 2019.01.28 |
---|---|
웹 아이콘 사용법 - Google Material, Font Awesome, glyphicons (0) | 2019.01.28 |
[Bootstrap] 부트스트랩 버전 3 버전 4 바뀐점(마이그레이션) (0) | 2019.01.24 |
[Bootstrap] 부트스트랩 정보 (0) | 2019.01.24 |
nginx 웹서버 리다이렉트 설정 (0) | 2019.01.20 |