#폰트 페이스 문법!
@font-face {
font-family: <a-remote-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>];
[font-style: <style>];
}
#실제사용예시
@font-face{
font-family:'NanumGothic';
src:url('fonts/NanumGothicRegular.eot');
src:url('fonts/NanumGothicRegular.eot?#iefix') format(‘embedded-opentype’),
url('fonts/NanumGothicRegular.woff') format(‘woff’),
local(※),
url('fonts/NanumGothicRegular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face{
font-family:'NanumGothic';
src:url('fonts/NanumGothicBold.eot');
src:url('fonts/NanumGothicBold.eot?#iefix') format(‘embedded-opentype’),
url('fonts/NanumGothicBold.woff') format(‘woff’),
local(※),
url('fonts/NanumGothicBold.ttf') format('truetype');
font-weight: 600;
}
@font-face{
font-family:'NanumGothic';
src:url('fonts/NanumGothicItalic.eot');
src:url('fonts/NanumGothicItalic.eot?#iefix') format(‘embedded-opentype’),
url('fonts/NanumGothicItalic.woff') format(‘woff’),
local(※),
url('fonts/NanumGothicItalic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face - CSS: Cascading Style Sheets | MDN
CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에
developer.mozilla.org
#Font Type(폰트 파일 유형) 및 지원 브라우저
웹 폰트에 사용되는 파일 타입은 지원되는 브라우저의 제한이 있다.
EOT(Embedded Open Type) : IE에서만 사용
TrueType과 OpenType : .ttf(TrueType format)와 .otf(OpenType format) 등.
대부분의 브라우저가 지원하며 IE9를 포함한 최신 버전의 IE, 크롬, 파이어폭스, 사파리, 오페라, iOS 사파리(4.2+) 사용
WOFF(Web Open Font Format) : TrueType이나 OpenType 서체를 압축한 것이기 때문에 일반적으로 파일 크기가 작아 모던 브라우저와 iOS 사파리(5+)에서 사용. 안드로드기기나 IE8 에서는 미지원
SVG(Scalable Vector Graphic) : SVG는 벡터 그래픽(확대해도 품질이 유지되는 이미지를 만드는 기술)을 위한 파일이므로 크기가 TrueType의 거의 두 배, WOFF 파일의 거의 세 배이다. iOS 사파라 4.1 이전 버전에서 인식하는 유일한 웹 폰트 타입
#import 방식
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');#링크형식
<head>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
rel="stylesheet"
/>
</head>Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
#웹폰트 사용하기
body {
font-family: "Noto Sans KR","NanumGothic", sans-serif;
}*또한 한글 폰트의 경우 "" 안에 써주며 영어폰트는 ""없이 써도 무방
'CSS' 카테고리의 다른 글
| 셀렉트박스 & 체크박스&라디오버튼 커스텀 (0) | 2022.01.13 |
|---|---|
| 저작권을 위한 CSS (0) | 2022.01.13 |
| 벤더 프리픽스(Vendor Prefix) (0) | 2022.01.13 |
| charset과 utf-8 (0) | 2022.01.13 |
| 크로스 브라우징을 위한 코드 (0) | 2022.01.13 |
