웹폰트 사용하기
웹사이트의 주소를 복사하여 스타일 시트나 html의 ‘<link href~'로 연결-스타일 시트에서 font-family로 지정합니다.
② 직접 웹서버에 업로드하는 방법 : *.eot, *woff 로 변환 - 서버로 업로드 -
@font-face{
font-family:글꼴이름;
src:local('글꼴이름‘),
url('글꼴이름.eot),
url('글꼴이름.woff') format('woff'),
url(‘글꼴이름.ttf') format('truetype);}
폰트 연결하기
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
직접 폰트 변환하여 연결하기
변환 사이트▼
https://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'}
'프로그래밍 > Style & Design' 카테고리의 다른 글
| [HTML] 24 Powerful HTML Attributes Every Senior Web Engineer Should Master! (0) | 2023.06.08 |
|---|---|
| [Html] autofocus, required , placeholder, readonly (0) | 2022.11.01 |
| Pixabay 이미지 (0) | 2022.10.13 |
| 브라우저 화면 드레그 안되게 css (0) | 2022.10.04 |
| 텍스트나 배경에 순수한 검정을 사용하면 안 되는 이유 (0) | 2022.07.15 |