폰트 연결하기
1. font-family : 글꼴 속성지정
윈도우의 기본글꼴은
영문 : sans-serif, serif
한글:굴림, 궁서, 돋움, 바탕
-css3 에서 웹폰트를 웹표준으로 설정하여 글꼴을 연결하여 사용하거나, 서버로부터 다운로드하여 스타일을 적용할 수 있습니다.
구글 폰트 다운로드 사이트▼
http://fonts.google.com
http://fonts.google.com/earlyaccess
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글 폰트 + 한국어 https://googlefonts.github.io/korean/
Google Fonts + 한국어 • Google Fonts + Korean
Great typography makes the web more beautiful, fast, and open. Using machine learning and the latest web standards, Google Fonts now offers the open source Korean fonts showcased in this website.
googlefonts.github.io
웹폰트 사용하기
웹사이트의 주소를 복사하여 스타일 시트나 html의 ‘<link href~'로 연결-스타일 시트에서 font-family로 지정합니다.
② 직접 웹서버에 업로드하는 방법 : *.eot, *woff 로 변환 - 서버로 업로드 -
@font-face{
font-family:글꼴이름;
src:local('글꼴이름‘),
url('글꼴이름.eot),
url('글꼴이름.woff') format('woff'),
url(‘글꼴이름.ttf') format('truetype);}
직접 폰트 변환하여 연결하기
변환 사이트▼
https://onlinefontconverter.com/
Online font converter
converts fonts to/from: .dfont .eot .otf .pfb .pfm .suit .svg .ttf .pfa .bin .pt3 .ps .t42 .cff .afm .ttc, .pdf & .woff
onlinefontconverter.com
웹폰트를 변환한 후, 변환된 폰트 파일들을 fonts라는 폴더를 생성하여 넣어 주고 html에 연결하여 사용하면 됩니다.
웹폰트의 확장자에는 otf, eot, svg, ttf, woff, woff2 등이 있습니다.
웹에서 사용 가능한 폰트 : woff, 트루타입(ttf), 오픈타입(ttf, otf), 임베디드 오픈타입(eot), svg폰트(svg, svgz)
: 컴퓨터에서 사용하는 글꼴은 ‘*.ttf’이지만,다른 확장자들에 비해 용량이 크다는 단점이 있어 웹코딩을 할때에는 ‘*.eot', '*.woff'이 가장 적합합니다.
---> 대부분의 모던 브라우저에서 지원하는 woff 글꼴 파일을 먼저 선언하고 ttf파일은 그 다음에 선언한다.(ttf가 용량이 크기 때문에) woff파일의 형식을 지원하는 브라우저는 woff를 다운로드 하고 굳이 ttf는 따로 다운로드 하지 않습니다.
외부 스타일 css파일로 연결할 경우
<link href="css파일경로" rel="stylesheet" type="text/css">
html파일의 <head>부분에 외부 스타일 link을 연결해 놓고
css파일에는 다음과 같이 입력합니다.
@font-face{
font-family :‘글꼴이름‘;
src : local('글꼴명‘),
url('경로명/글꼴이름‘) format(’파일유형‘),
url('경로명/글꼴이름‘) format(’파일유형‘),
url('경로명/글꼴이름‘) format(’파일유형‘),
url('경로명/글꼴이름‘) format(’파일유형‘);
@font-face{
font-family :‘NanumPenScript-Regular‘;
src : local('NanumPenScript-Regular‘),
url('./fonts/NanumPenScript-Regular.eot‘),
url('./fonts/NanumPenScript-Regular.woff‘) format(’woff‘),
url('./fonts/NanumPenScript-Regular.ttf‘) format(’truetype‘),
url('./fonts/NanumPenScript-Regular.otff‘) format(’opentype‘);
}
폰트를 문서 전체( body)에 적용할 경우
body{font-family:'NanumPenScript-Regular‘,’serif','sans-serif'}
'html & css3' 카테고리의 다른 글
| [html/css] input checkbox 디폴트 없애고 css로 꾸미기 (0) | 2021.03.23 |
|---|---|
| [html/css] 대시보드 좌측 사이드 메뉴 기본 포멧 (1) | 2021.02.20 |
| [웹디자인/html/css] 웹호스팅에 파일 업로드하기 / 필수 확인 사항들 (0) | 2020.11.29 |
| @keyframes 과 animation 속기형/animation-direction (0) | 2020.11.23 |
| [html/css] 페이지 로딩 애니메이션 만들기 @keyframes/hue-rotate/infinite 속성 등 (0) | 2020.11.22 |
